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.

Vantage media queries

Open 4 replies premiumthemetheme-vantage
admin
11 years ago · Last reply by Andrew Misplon 11 years ago

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.

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

Need fast email support? Get SiteOrigin Premium

Replies

4
  1. Andrew Misplon Staff 11 years, 10 months ago

    Hi Joy

    What are you looking to do?

  2. jsj9625 11 years, 10 months ago

    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.

  3. Andrew Misplon Staff 11 years, 10 months ago

    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.

  4. Andrew Misplon Staff 11 years, 10 months ago

    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.

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