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.

Vantage Header Widget – Responsive issue

Open 3 replies premiumthemetheme-vantage
ChrisA
11 years ago · Last reply by Andrew Misplon 11 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.

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Andrew Misplon Staff 11 years, 3 months ago

    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. ChrisA 11 years, 3 months ago

    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. Andrew Misplon Staff 11 years, 3 months ago

    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.

Have a different question or issue?

Start New Thread