Skip to main content

Forums

This topic contains 6 replies, has 3 voices, and was last updated by  Beverleyh 1 month, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #156730

    1957Goldtop
    Participant

    I’m not sure if this question is too specific to Squarespace or not. I wanted my sidebar to have a different color than the “main” portion of the page so I added this code to my custom CSS box:
    body.sidebar-position-left #headerWrapper {
    position: absolute;
    top: 0px;
    left: 25px;
    width: 200px;
    background: #1a1a1a;
    padding: 10px;
    height: 100%;
    }

    body.sidebar-position-left #header {
    padding-top: 15px;
    padding-right: 10px;
    }

    It does what I want to, however on some pages it makes the browser think there is more content below which causes the scroll bars to come out. For example if you go to this page:
    http://jeff-singer.squarespace.com/contact-1-1/
    (password: testing)

    You can see the page will scroll even though there is no content to scroll.

    I’ve determined it’s the height: 100% that is causing it. If I change it to 90% it will stop the scrolling, however the sidebar doesn’t go all the way down. Anything 91% or higher the scrolling comes back.

    Any ideas?

    Thanks!!!!

    #156738

    1957Goldtop
    Participant

    I may want to marry you! I was convinced in my head that this one issue was not going to be fixable. So far every issue I’ve brought here has been fixed… glad I found this place!

    Thanks!

    #156741

    1957Goldtop
    Participant

    On a similar note, I used a code block to place an image where I wanted it since the page builder wasn’t working how I wanted… However, the code I used is causing horizontal scrolling.

    Here is the page: http://jeff-singer.squarespace.com/contact/

    And here is the code (which admittedly was just me guessing how to get the image in the right place and playing until I got it there… so there may be better ways to do it):

    <div id="pic">
    <div style='position:relative;
    top:-215px;
    right:-275px;
    '>
    <img src="//jeffsingerphotography.com/files/meandchloe.jpg" height="200" width="200" />
    </div>

    Thanks again!

    #156744

    1957Goldtop
    Participant

    Let me see if this makes anything clearer… I actually changed all the code to be in one block. Basically the custom code section starts with my name since I needed that to be a custom font.

    Here is the entire section of code for the contact info and image (again, all in the same block):

    <div id="namelogosm">
    JEFF<br>
    SINGER<br>
    </div>
    
    <div id="infologo">
    SAN FRANCISCO<br>
    LOS ANGELES<br>
    NEW YORK CITY<br>
    +1 111 111 1111<br>
    email -[at]- mydomain.COM<br><br>
    
    STOCK REPRESENTATION:<br>
    <div id="stocklogo">
    <a href="http://www.gallerystock.com/C.aspx?VP3=SearchResult_VPage&VBID=279RI30KMPG2" target="_blank" >gallery stock<font color="red">.</font></a>
    </div>
    
    <div id="pic">
      <div style='position:relative;
    top:-215px;
    right:-275px;
     '>
    <img src="//jeffsingerphotography.com/files/meandchloe.jpg" height="200" width="200" />
    </div>
    
    #156756

    1957Goldtop
    Participant

    It placed the picture after all the text:
    http://jeff-singer.squarespace.com/contact/

    #281027

    Thoughtful Geek
    Participant

    What is the solution, please ?

    #281028

    Beverleyh
    Participant

    What is the problem you’re having specifically?

    You might want to start a new thread where you can;

    • clarify the question you’re asking
    • clearly describe the problem vs what you expect to happen
    • show the problem code (via CodePen)
    • show the code you’ve tried to fix the problem yourself (via CodePen)
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star