Home>Support>Results at different screen resolutions

Results at different screen resolutions

By Jac Blom, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Is there a way to set theme Vantage so it can handle various screen resolutions?
Since I totally built the website at my HD Laptop with resolution 1080×1920 everything was perfect.
Only now it’s online I looked at it on my older laptop with a resolution of 900×1600 and some details are missing. For example in the header background is a picture in the upper right corner and this is complete invisible at a lower resolution.

URL: http://vitanovaflora.be

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 Jac Blom

    Just found out I have the same problem with different browsers.
    With Explorer everything looks fine, at least at the hd-screen, but with Firefox it’s the same as with the lower resolution screen. Looks too large and items disapear at the edges.
    Hopefuly you guys can find a solution for this.
    I like this theme and especialy because of the responsive design, but if every screen gives an other outcome it doesn’t work well.

  2. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Hi Jac

    Thanks for reaching out.

    The manner in which you’re deploying a masthead background image is pretty specific to this case. Usually that would be an image that covers the entire masthead such as a pattern etc. That’s more the expected case.

    I can resolve this situation with the following Custom CSS:

    /* Header */

header#masthead {
background-position: top right;
background-repeat: no-repeat;
}

    However this image and it’s positioning it’s going to work well on tablet/mobile.

    What I’d recommend doing is adding a Visual Editor widget to the header, add Your image to that widget, and add the widget after the Facebook icon. We’ll then have three widgets ready to handle a change to a smaller screen size. After that’s done, I’d recommend adding the following to Appearance > Custom CSS to help split things up as the screen get’s smaller:

    /* 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;
  }
}
  3. 9 years, 8 months ago Jac Blom

    Hi Andrew, thank you for the support.
    Will try this one of these days, at the moment I have a more important problem with multilingual use in combination with WooCommerce product cataloq. URL (or permalinks) are not correct when using the site in another language.
    Product pages are only in the default language(= Dutch) but if you choose French or German as language the language-code fr of de is added to the URL, and they don’t exist.

  4. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    This would be specific to the translation plugin you’re running. Ideally, start out looking at their documentation and forum on the topic.

    Have you tried re-saving Permalinks from Settings > Permalinks?

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