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.

.support-text stacking via media query

Resolved 9 replies themetheme-vantage
Isaac F
11 years ago · Last reply by Andrew Misplon 11 years ago

Hey,

I really want the .support-text to stack underneath the logo BEFORE the browser width means they start interfering with each other visually.

I’ve determined this width to be 850px, but I’ve very limited experience and success with media queries so looking for a quick pointer at how I’d make this happen?

Cheers!

URL: http://www.rcvys.org.uk/wordpress/about/team

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

Need fast email support? Get SiteOrigin Premium

Replies

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

    Hi Isaac

    Please try the following under Appearance > Custom CSS and adjust as required:

    /* 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%;
}
}
  2. Isaac F 11 years, 4 months ago

    Thats great, nearly there – how do I center both elements in the header?

    Thanks for your help

  3. Andrew Misplon Staff 11 years, 4 months ago

    For sure.

    In your child theme you’re declaring a width for the support text div:

    width: 400px!important;

    That’s causing that div to not center with the other properties you’ve tried.

    At the breakpoint the following will center the logo:

    header#masthead .hgroup .logo {
float: none;
text-align: center;
}

    So put the above selector within the breakpoint.

  4. Isaac F 11 years, 4 months ago

    Thanks Andrew, that works except for between 680px and 840px… Sorry, I’m not great at figuring this stuff out! I’m sure there’s loads of excess code in there causing issues

  5. Andrew Misplon Staff 11 years, 4 months ago

    No problem.

    In your stylesheet you have:

    header#masthead hgroup .support-text, .support-text {
font-size: 16px!important;
width: 400px!important;
line-height: 1.4em!important;
font-weight: 200!important;
color: #FFFFFF!important;
font-style: normal!important;
text-align: center!important;
}

    The 400px added there is causing the problem.

  6. Isaac F 11 years, 4 months ago

    Thank you very much!

    The 400px was in there to force a line break in the text, thereby avoiding a single word on a new line underneath. I’ll find another way of doing that / just deal with it.

    All the best, thanks again!

  7. Andrew Misplon Staff 11 years, 3 months ago

    That field accepts HTML so you can use:
  8. Isaac F 11 years, 3 months ago

    Ah brilliant, thanks Andrew

  9. Andrew Misplon Staff 11 years, 3 months ago

    For sure, glad that helped.

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