Skip to main content

Forums

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

Viewing 10 posts - 1 through 10 (of 10 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!!!!

    #156735

    Ed
    Participant

    This reply has been reported for inappropriate content.

    That page includes some JS that’s putting an inline min-height rule on #page, and that’s what’s causing your page to scroll when it has no reason to scroll.

    To get rid of it, simply add a CSS rule that makes the min-height for that element be the computed value:

    #page {
        min-height: inherit !important;
    }
    

    Squarespace is a pretty good platform, and their pre-made templates don’t usually have hacky CSS in them, so you should probably make sure you’re not setting it in some plugin or some hidden setting, and remove it properly.

    #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!

    #156742

    Ed
    Participant

    This reply has been reported for inappropriate content.

    That’s because, in terms of how the browser parses your site, the image is in the block underneath the contact information (what you call the “code block”). It only appears to be next to the contact information because of the absolute position you’ve defined. That’s why you scroll.

    To get rid of that, you need them to be in the same “row”. Unfortunately I don’t know how you achieve that with Squarespace’s editor, I’ve not used it exhaustively. I’m not sure I’ll be able to help you there.

    #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>
    
    #156750

    Ed
    Participant

    This reply has been reported for inappropriate content.

    Oh good, your code is simpler than I thought. Looks like Squarespace adds a huge amount of HTML in with yours that confused me.

    Please replace that HTML with this:

    <div id="contact-info">
        <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>
    
    <div id="pic">
        <img src="//jeffsingerphotography.com/files/meandchloe.jpg" height="200" width="200" />
    </div>
    

    …and also add this CSS:

    contact-info, #pic {

    display: inline-block;
    

    }

    That should make the contact info block and the image display on the same “level” naturally.

    #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 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

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