Home>Support>Vantage – Tablet view width set in page builder being ignored

Vantage – Tablet view width set in page builder being ignored

By Dave, 8 years ago. Last reply by Alex S, 8 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].

Hi Guys,

First of all, thank you! Your Vantage theme is incredible!

But I have a problem….

I have left the page builder tablet and mobile device layout widths as default, but Vantage is ignoring the Tablet width of 991px for some reason. Consequently the site looks crap on a tablet but fine on a mobile phone. I’ve had a look through the Vantage style.css and have found the part relevant to responsive layout but i’m unsure what to change in order to get the site to behave on a tablet device.

Any help much appreciated.

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

  1. 8 years, 8 months ago Dave

    To answer my own question, and to save time for those experiencing this issue i placed the code below in the child theme style.css and it fixed the issue

    /* =Responsive Layout
----------------------------------------------- */
@media (max-width: 1080px) {
  body.responsive #masthead .hgroup .logo img {
    /* Scale down the logo if necessary */
    max-width: 100%;
    height: auto;
  }
  body.responsive #masthead.masthead-logo-in-menu .logo {
    margin-left: 20px;
  }
  body.responsive #masthead.masthead-logo-in-menu .main-navigation .menu-mobilenav-container ul {
    margin-right: 0;
  }
  body.responsive #masthead.masthead-logo-in-menu .main-navigation .menu-mobilenav-container ul li {
    float: right;
  }
  body.responsive #masthead.masthead-logo-in-menu .main-navigation .menu-mobilenav-container ul li a {
    padding-left: 20px;
    padding-right: 20px;
  }
  body.responsive #masthead.masthead-logo-in-menu #search-icon-icon {
    display: none;
  }
}
#masthead.force-responsive .hgroup {
  text-align: center;
}
#masthead.force-responsive .hgroup .logo {
  float: none;
}
#masthead.force-responsive .hgroup .logo img {
  margin: 0 auto;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
#masthead.force-responsive .hgroup .support-text,
#masthead.force-responsive .hgroup #header-sidebar {
  position: static;
  display: block;
  margin-top: 30px;
  max-width: 100%;
}
#masthead.force-responsive .hgroup .support-text img,
#masthead.force-responsive .hgroup #header-sidebar img {
  max-width: 100%;
  height: auto;
}
#masthead.force-responsive .hgroup #header-sidebar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: auto;
}
#masthead.force-responsive .hgroup #header-sidebar .widget {
  display: block;
  margin: 0 auto;
  float: none;
}
/* We consider 991px to be mobile resolution */
@media (max-width: 991px) {
  body.responsive #masthead .hgroup {
    text-align: center;
  }
  body.responsive #masthead .hgroup .logo {
    float: none;
  }
  body.responsive #masthead .hgroup .logo img {
    margin: 0 auto;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  body.responsive #masthead .hgroup .support-text,
  body.responsive #masthead .hgroup #header-sidebar {
    position: static;
    display: block;
    margin-top: 30px;
    max-width: 100%;
  }
  body.responsive #masthead .hgroup .support-text img,
  body.responsive #masthead .hgroup #header-sidebar img {
    max-width: 100%;
    height: auto;
  }
  body.responsive #masthead .hgroup #header-sidebar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto;
  }
  body.responsive #masthead .hgroup #header-sidebar .widget {
    display: block;
    margin: 0 auto;
    float: none;
  }
  body.responsive #primary,
  body.responsive #secondary {
    width: auto;
    float: none;
  }
  body.responsive #secondary {
    margin-top: 35px;
  }
  body.responsive #footer-widgets .widget {
    display: block;
    margin-bottom: 25px;
    float: none;
  }
  body.responsive #footer-widgets .widget:last-child {
    margin-bottom: 0;
  }
}
body.responsive #page-wrapper {
  max-width: 1080px;
  width: auto;
  overflow-x: hidden;
}
body.responsive.layout-full #page-wrapper {
  max-width: 100%;
}
body.responsive.layout-boxed #page-wrapper {
  overflow-x: visible;
}
body.responsive.layout-full #page-wrapper .full-container {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
/* Make widget layouts vertical below 991px */
@media screen and (max-width: 991px) {
  body.responsive #footer-widgets .widget,
  body.responsive #masthead-widgets .widget {
    width: auto;
    float: none;
    padding: 0;
    padding-bottom: 25px;
  }
}
  2. 8 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Dave,

    I’m glad you were able to resolve this issue. I’m, sorry I wasn’t able to be of assistance this time. To clarify, Vantage doesn’t consider the Page Builder defined layout settings and instead uses its own predefined sizing.

    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