I see a couple media queries in style.css that contribute to the responsive layout, but is there somewhere else I should look? I am customizing with a child theme.
Vantage media queries
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Joy
What are you looking to do?
I want to see how certain elements of the theme are set up to be responsive. Two issues I’m having:
My child-theme main navigation menu has an asymmetric background, so I’ve given the menu a left margin to push it over. As the browser window is resized, the background and menu move together at first, but at around 1090px the menu buttons stop moving. I need them to continue sliding with the background until I decide to switch to the mobile menu.
In the footer, I have floated the menu in order to add a floated image to the right. I’d like the footer menu to stay aligned with the left edge of the page/post content, then reflow as the browser window gets smaller.
I’m just wondering where the responsive functionality is built in to Vantage so that I can match media query points and techniques.
Some elements will be responsive by nature. For example the primary and secondary divs have percentage widths.
Ideally in this case you’d write your own media queries under Appearance > Custom CSS to change element behaviour as required.
So for example some clients with a certain header widget setup see a tablet resolution where the header widget area crosses over into the logo space, the following snippet increases the point at which the behaviour changes to mobile and resolves the issue:
/* Vantage increase support text breakpoint */ @media screen and (max-width: 960px) { body.responsive header#masthead hgroup .support-text, body.responsive header#masthead hgroup #header-sidebar { position: static; display: block; margin-top: 30px; max-width: 100%; } }So you could create your breakpoints and then change element behaviour as required.