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 Masthead Widgets – Displaying different on different browsers

Open 1 reply themetheme-vantage
Gina Garvey
11 years ago · Last reply by Andrew Misplon 11 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.

Need fast email support? Get SiteOrigin Premium

Replies

1
  1. Andrew Misplon Staff 11 years, 1 month ago

    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.

Have a different question or issue?

Start New Thread