Hi there,
I’ve now moved my site from local to live, and so have had my first chance to check out the responsive layout on a mobile device. However, it doesn’t seem to be displaying correctly.
The theme seems to believe that the sidebar should be showing, and so restricts the primary content to 60% of the page. The sidebar then shows at the bottom of the page, instead of at the side.
I suspect this is due to the custom CSS I’ve added to the child theme:
/* Vantage set sidebar width */
#primary {
width: 60% !important;
}
#secondary {
width: 33% !important;
}Your help in fixing the responsive layout will be greatly appreciated!
Hi Lauren
That has to be one of the nicest Vantage sites we’ve seen so far. Well done.
Try the following in your child theme’s style.css file or in Custom CSS:
@media (max-width: 680px) { #primary, #secondary { width: 100% !important; } }I’m using !important because you are too so we need it. That’s no problem but in future you can also try checking out the selector you’re trying to override, by adding more specificity than the original selector you can also gain precedence.
(http://css-tricks.com/specifics-on-css-specificity/)
Hi Andrew,
Firstly, thanks so much for the compliment! That’s really lovely to hear.
Thanks for providing the code – it didn’t work straight away, and I found out it was because the “!important”s were throwing it off. I did a bit of digging in the vantage parent theme css to find out what was overriding it and eventually arrived at the code below – happily it’s now working on both full and responsive layouts!
.layout-full #primary { width: 60%; } .layout-full #secondary { width: 33%; } @media (max-width: 680px) { body.responsive #primary, body.responsive #secondary { width: 100%; } }Super, glad you were able to troubleshoot that. Thanks for sharing your solution.