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 – Tablet view width set in page builder being ignored

Open 2 replies technicalthemetheme-vantage
Dave
8 years ago · Last reply by Alex S 8 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

2
  1. Dave 8 years, 11 months ago

    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. Alex S Staff 8 years, 11 months ago

    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.

Have a different question or issue?

Start New Thread