This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Responsive Layout issues using Vantage Premium child theme

Resolved 3 replies premiumthemetheme-vantage
Lauren Short
11 years ago · Last reply by Andrew Misplon 11 years ago

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!

URL: http://laurencariscooks.com

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Andrew Misplon Staff 11 years, 2 months ago

    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/)

  2. Lauren Short 11 years, 2 months ago

    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%;
	}
}
  3. Andrew Misplon Staff 11 years, 2 months ago

    Super, glad you were able to troubleshoot that. Thanks for sharing your solution.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread