Jump to content


Photo
- - - - -

full width sections in the header - whitespace on top


Best Answer Danny , 20 March 2013 - 11:02 AM

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.pagel...ion/custom-css/

Go to the full post


  • Please log in to reply
3 replies to this topic

#1 Guido

Guido

    Advanced Member

  • Members

  • 48 posts
  • Country: Country Flag

Posted 20 March 2013 - 10:48 AM

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?



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16247 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 20 March 2013 - 11:02 AM   Best Answer

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.

 

Please Login or Register to see this Hidden Content



#3 Guido

Guido

    Advanced Member

  • Members

  • 48 posts
  • Country: Country Flag

Posted 20 March 2013 - 12:26 PM

Done, solved, Thank You!



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16247 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 20 March 2013 - 12:31 PM

Great!

 

Thanks for informing us the issue has been resolved.