Header Space in Desktop and Mobile to be different

WNB

Hi,

I copied your code "body.minimalist-header:not(.template-slider) #Content { padding-top: 200px !important; }" from one of your post.. 

It works fine but I do not want it to be working on mobile version, as 200px in mobile does not look good.

Cheers

Bryan

You need to use CSS queries, like that:

@media (min-width:768px) {
body.minimalist-header:not(.template-slider) #Content { padding-top: 200px !important; }
}

This css will only work for resolution larger than 768px, or you can do it like that:

@media (max-width:767px) {
body.minimalist-header:not(.template-slider) #Content { padding-top: 0px !important; }
}

This will set the padding to 0 when the browser is less than 767px in width.

thank you

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

WNB

Thanks Bro, you are a Magician..

Cheers