Archived

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

  • 0

full width sections in the header - whitespace on top

Question

Posted · Report post

Hi,

 

on www.silbertreu.de i use full with sections in the header. When a header section is set to full width, by default a small whitespace will show up underneath the fixed nav bar.

 

To fix that, i dropped this code into the custom code box in the PageLines settings:

 

body.navbar_fixed .page-canvas {
    padding-top: 39px;
}

 

But since 2.4 this workaround is not responsive any more. On my iphone the above mentioned whitespace is back again. How to fix it?

 

Another question regarding the same thing: I tried to drop the above code into my style.less file instead of the custom code box but it will not compile. How has this code to be changed to work in the style.less?

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

Hi,

 

This is happening as the code you're using is overriding the @media query for devices. When your site is viewed on a device with a screen resolution of 767px, the padding is set to 0. But as your code is overriding this and setting it to 39px for all devices/browsers.

 

I recommend you add a @media (max-width: 767px) to your custom CSS and have the padding set to 0. You can see how this works by either resizing your browser window, load up your browsers web dev tools and the @media (max-width: 767px) CSS will then be visible for you to see.

 

When adding custom CSS to the style.less, you may require using one of the overrides, see our documentation for more information.

 

http://support.pagelines.me/docs/customization/custom-css/

Share this post


Link to post
Share on other sites

Posted · Report post

Done, solved, Thank You!

Share this post


Link to post
Share on other sites

Posted · Report post

Great!

 

Thanks for informing us the issue has been resolved.

Share this post


Link to post
Share on other sites