Home>Support>Header widget is overlapping with Title in responsive mode

Header widget is overlapping with Title in responsive mode

By mediboard, 6 years ago. Last reply by Alex S, 6 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

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?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 6 years, 9 months ago Alex S
    Hi, I Work Here

    Hi Mediboard,

    Do you have a public URL where we can take a look at what’s going on?

  2. 6 years, 9 months ago mediboard

    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

  3. 6 years, 9 months ago Alex S
    Hi, I Work Here

    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?

  4. 6 years, 9 months ago Private Message - Alex S Hi, I Work Here

    This is a private message.

  5. 6 years, 9 months ago Private Message - WordPress

    This is a private message.

  6. 6 years, 9 months ago mediboard

    Done. Thanks.

    URL is https://www.ibspatient.org/staging/wp

  7. 6 years, 9 months ago Alex S
    Hi, I Work Here

    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?

  8. 6 years, 9 months ago mediboard

    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.

  9. 6 years, 9 months ago Alex S
    Hi, I Work Here

    Hi Mediboard,

    Great to hear that helped!
    Please be sure to post another thread if you have any other questions.

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More