This is happening for responsive sizes >680px <768px
Vanilla Vantage free version used the customize logo + site title + Vantage social media widget in the Header
Only custom CSS is:
#masthead .hgroup h1 {
text-transform: uppercase;
font-weight: 400;
}
Is there an easy fix for this overlap?
Hi Mediboard,
Do you have a public URL where we can take a look at what’s going on?
The site is in our staging area which unfortunately isn’t public.
This image illustrates the overlap.
https://www.ibspatient.org/files/Vantage-overlap.png
Hi Mediboard
I really need to inspect this overlap to work out what’s going on. Would it be possible for you to create a temporary account for us so we can log in and take a look?
This is a private message.
This is a private message.
Done. Thanks.
URL is https://www.ibspatient.org/staging/wp
Hi Mediboard,
Try adding the following CSS to WP AdminAppearanceCustom CSS:
@media (max-width: 768px) { .hgroup .widget_vantage-social-media .social-media-icon { float: none; display: inline-block; } body.responsive #masthead .hgroup #header-sidebar { position: static; display: block; margin-top: 30px; max-width: 100%; } body.responsive #masthead .hgroup #header-sidebar { padding-top: 0 !important; padding-bottom: 0 !important; height: auto; } body.responsive #masthead .hgroup, body.responsive #masthead .hgroup #header-sidebar .widget, body.responsive #masthead .hgroup .logo { text-align: center; display: block; margin: 0 auto; float: none; } }How does that look?
I like it, thanks!
I was trying to do the same thing, borrow the code from @media (max-width: 680px) and move it to (max-width: 1080px). I never thought to create a @media (max-width: 768px) section. Nice solution.
Hi Mediboard,
Great to hear that helped!
Please be sure to post another thread if you have any other questions.