Home>Support>Vantage Masthead Widgets – Displaying different on different browsers

Vantage Masthead Widgets – Displaying different on different browsers

By Gina Garvey, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hello and many thanks for the total awesomeness, elegance and delicious flavour of VantageForCheapskates.

I’m building a site for a friend and have inserted two widgets into the Masthead. His logo appears on the top left and on the top right, I’ve inserted a profile photo of him and then a text widget to promo the type of business he’s in. www.fernhillsolutions.co.nz

It looks fine on my Mac/Chrome&Safari browser, but on his wide screen Windows browser the two widgets overlap in a fairly ugly way. I’ve got all the ‘responsive’ tick boxes ticked and can’t work out what is wrong.

Also, on a side note – I can alter the padding of the masthead AND the background colour of it, but I can’t seem to do both changes at once. (I have a plugin CSS editor and the code you provide in other forums works well, but I can’t seem to get both changes to ‘stick’ at the same time. Would Vantage premium solve this problem? I can persuade my mate to upgrade.)

Thanks
Gina
Wellington

URL: http://fernhillsolutions.co.nz

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, 8 months ago Andrew Misplon
    Hi, I Work Here

    Hi Gina

    Thanks for reaching out.

    I can see an overlap between the widgets and the logo, but that would be on tablet view. If you’d like to sort that out, try the following in your Custom CSS plugin:

    /* Vantage Header Responsive Breakpoint */

@media (max-width: 960px) {
  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;
  }
}

    I’m not on a Windows machine so I can’t test that issue right now. You might try the following to resolve:

    /* Header Widget Area */

header#masthead .hgroup #header-sidebar aside.widget {
float: none;
display: inline-block;
vertical-align: middle;
}

    Here is how you can set header padding:

    /* Vantage Header Padding */

header#masthead .hgroup {
padding-top: 35px !important;
padding-bottom: 35px !important;
}

    Here is how you can set the header background color:

    /* Vantage Masthead Background Color */

header#masthead {
background-color: #000000;
}

    Hope that helps.

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