Jump to content

Footer scroll bar

Recommended Posts

Posted

Site URL: https://photojourneys.co.uk/footertest

Hi there!

 

I was wondering whether anyone could help with the following page: https://photojourneys.co.uk/footertest/

I may have not noticed, but the code I would normally add to this category of pages would not affect the footer. It does apparently and now scroll bars have showed up in the footer (please see screenshot). 

The code I am using is as follows: 

<style>
    @media only screen and (max-width: 780px) {
    [data-section-id="6061e9223077a120e417e48a"] { 
            display: none !important; 
    } 
  }
@media only screen and (min-width: 781px) {  
    [data-section-id="6061f14c60b0890b87899b58"] { 
        display: none !important;
    }
  }
  
  @media only screen and (min-width: 768px){
 .page-section:nth-child(1)
  .section-background{margin-left:3%; width:50%; overflow-y:hidden; margin-bottom:3%; margin-top:3% }
  .page-section:nth-child(1)
  .content-wrapper{margin-left:53%; height:10vh; overflow-y:scroll; padding-bottom:100!important;}
  } 
  }
</style>

Would there be a way for the code to only affect the content sections instead and not the footer?

Many thanks!

Screenshot 2021-03-29 182806.png

  • Replies 3
  • Views 751
  • Created
  • Last Reply
Posted
8 hours ago, BruthaBear said:

Site URL: https://photojourneys.co.uk/footertest

Hi there!

 

I was wondering whether anyone could help with the following page: https://photojourneys.co.uk/footertest/

I may have not noticed, but the code I would normally add to this category of pages would not affect the footer. It does apparently and now scroll bars have showed up in the footer (please see screenshot). 

The code I am using is as follows: 


<style>
    @media only screen and (max-width: 780px) {
    [data-section-id="6061e9223077a120e417e48a"] { 
            display: none !important; 
    } 
  }
@media only screen and (min-width: 781px) {  
    [data-section-id="6061f14c60b0890b87899b58"] { 
        display: none !important;
    }
  }
  
  @media only screen and (min-width: 768px){
 .page-section:nth-child(1)
  .section-background{margin-left:3%; width:50%; overflow-y:hidden; margin-bottom:3%; margin-top:3% }
  .page-section:nth-child(1)
  .content-wrapper{margin-left:53%; height:10vh; overflow-y:scroll; padding-bottom:100!important;}
  } 
  }
</style>

Would there be a way for the code to only affect the content sections instead and not the footer?

Many thanks!

Screenshot 2021-03-29 182806.png

Try to target the page content id #page

<style>
    @media only screen and (max-width: 780px) {
    [data-section-id="6061e9223077a120e417e48a"] { 
            display: none !important; 
    } 
  }
@media only screen and (min-width: 781px) {  
    [data-section-id="6061f14c60b0890b87899b58"] { 
        display: none !important;
    }
  }
  
  @media only screen and (min-width: 768px){
#page .page-section:nth-child(1)
  .section-background{margin-left:3%; width:50%; overflow-y:hidden; margin-bottom:3%; margin-top:3% }
#page  .page-section:nth-child(1)
  .content-wrapper{margin-left:53%; height:10vh; overflow-y:scroll; padding-bottom:100!important;}
  } 
  }
</style>

image.thumb.png.64b51d4385664605e0743ff081b29fcc.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Posted
59 minutes ago, BruthaBear said:

Hi bangank36,

 

Many thanks for your prompt reply.

 

I would like to confirm that the code has worked! Your help is much appreciated. 

 

--

BruthaBear

Thanks for the feedback, have a good day!

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.