Customizing responsive layout

wildgums · September 2015

Hi,

I have a custom responsive css (which I add to the custom CSS page).

@media only screen and (max-width:480px) {

body:not(.template-slider):not(.header-simple) #Header { min-height: 200px !important; background-position: center 202px; }

}

However... this doesn't work. When I go to the website, it shows that responsive.css?ver=9.5 overrules my customized css (and the !important is not taken into account).

Any idea what could be wrong? Is it the loading order of the css stylesheets?

Albert · September 2015

Hi,

any url to page where you used above css and does not work?

wildgums · September 2015

http://www.wildgums.com

Albert · September 2015

Your custom css is broken. You should use below css instead:

@media only screen and (max-width: 480px) { 
    body:not(.template-slider) #Header_wrapper { height: 200px !important; }
}

wildgums · September 2015

Thanks, that solves the issue.

Albert · September 2015

No problem

Customizing responsive layout

Comments