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!
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%; } }Thats great, nearly there – how do I center both elements in the header?
Thanks for your help
For sure.
In your child theme you’re declaring a width for the support text div:
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.
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
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.
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!
That field accepts HTML so you can use:
Ah brilliant, thanks Andrew
For sure, glad that helped.