Footer scroll bar

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!

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!

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>

Hi bangank36,

Many thanks for your prompt reply.

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

--

BruthaBear

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!