Home>Support>Vantage Header Widget – Responsive issue

Vantage Header Widget – Responsive issue

By ChrisA, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

I have added an “advert” widget to the center of the header area but it is not properly responsive when screen size reduced (eg on an iPad in portrait size the advert overlaps the logo) There is an additional widget on the rght displaying social media icons which are fine.)

I looked at previous support posts on similar issue and have added follwoing Custon CSS

/* Position of ADVERT widget in header */
#black-studio-tinymce-2 {
width: 500px;
}
@media screen and (max-width: 960px) {
#black-studio-tinymce-2 {
text-align: left;
width: auto;
}
}

Is there a way to fix this?

Many thanks for great theme.
PS Is there a widget builder or plugin to produce the advert style boxes I have placed on the page (I did these “by hand”)?

URL: http://www.chrisaxton.com

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

  1. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Chris

    It’s a bit of work to get this right at the moment given our current setup. The below placed under Appearance > Custom CSS should do the trick:

    /* Vantage Change Header and Social Widget Responsive Breakpoint + Extras */

@media (max-width: 980px) {
  body.responsive header#masthead .hgroup {
    text-align: center;
  }
  body.responsive header#masthead .hgroup .logo {
    float: none;
  }
  body.responsive header#masthead .hgroup .logo img {
    margin: 0 auto;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  body.responsive header#masthead .hgroup .support-text,
  body.responsive header#masthead .hgroup #header-sidebar {
    position: static;
    display: block;
    margin-top: 30px;
    max-width: 100%;
  }
  body.responsive header#masthead .hgroup .support-text img,
  body.responsive header#masthead .hgroup #header-sidebar img {
    max-width: 100%;
    height: auto;
  }
  body.responsive header#masthead .hgroup #header-sidebar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto;
  }
  body.responsive header#masthead .hgroup #header-sidebar .widget {
    display: block;
    margin: 0 auto;
    float: none;
  }
  aside#black-studio-tinymce-3 .textwidget div[style] { margin-right: 0 !important; }
  aside#black-studio-tinymce-3 {
    margin-bottom: 20px !important;
  }
  body.responsive .widget_vantage-social-media {
    text-align: center;
  }
  body.responsive .widget_vantage-social-media .social-media-icon {
    display: inline-block;
    float: none;
  }
}
  2. 9 years, 10 months ago ChrisA

    Hi Andrew
    Thanks for the rapid response. I replaced the “@media screen” lines of my CSS with yours and that seems to have fixed the problem.
    Many thanks.
    Chris

  3. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Super, 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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More