Home>Support>How can i make the site wider?

How can i make the site wider?

By Gerald Ahlswede, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hey,

i´m working with the pro version. How can ich change the site-width? My target is 95% like here: https://www.babingtonhouse.co.uk/

Thanks for your help.

Gerald

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, 6 months ago Daniel
    Hi, I Work Here

    Hi Gerald

    You could try as suggested in this guide:

    Link: https://siteorigin.com/vantage-documentation/theme-settings/layout/

    then add the following custom CSS via Appearance > Custom CSS

    body.layout-full {
  padding: 30px !important
}

    Cheers

  2. 9 years, 6 months ago Gerald Ahlswede

    Hola,
    the full screen was and is activated like in your Description. I have the css code added (plus a semicolon to be safe), but nothing happens. The Theme is ignoring my Choice “full width”. Any other ideas?

    best regards
    Gerald

  3. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Hey Gerald, give the following a try under Appearance > Custom CSS:

    /* Vantage: Full width adjustment */body.responsive.layout-full #page-wrapper header#masthead .full-container {max-width: 95%;}

    Vantage Responsive Layout and Full Width Layout must be enabled under Appearance > Theme Settings.

    Hope that helps.

  4. 9 years, 6 months ago Gerald Ahlswede

    Hey Andrew,
    Thank you. The Nav changed wider, the main content is as the beginning a block. I have therefore expanded your code to the additives .content and #main, unfortunately without visible success.
    Here is my custom.css:

    .entry-content h1 {
 font-family: 'Francois One', sans-serif, cursive, Arial;  
  font-size: 100px;
  font-weight: 300;
  color: #fff;
  text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);
  -webkit-font-smoothing: antialiased;
  line-height: 100%;
  margin:0;
 }

.entry-content h2 {
  font-family: 'Signika Negative', sans-serif;
    font-size: 40px;
  color: #fff;
  text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);
  -webkit-font-smoothing: antialiased;
  line-height: 100%;
 }

.entry-content h3 {
  font-family: 'Signika Negative', sans-serif;  
  font-size: 30px;
color: #53301e;
  font-weight: 400;
  line-height: 110%;
}

.entry-content h4, .entry-content h5, .entry-content h6 {
    color: #fff;
    font-weight: 500;
    margin: 1em 0;
}

.main-navigation {
    font-size: 16px;
  font-family: 'Signika Negative', sans-serif;
  margin: 0 auto;
   }

.main-navigation.sticky {   
  background: rgba(255,255,255,0.8);
   }

.main-navigation a {
    font-weight: normal;
}

header#masthead.masthead-logo-in-menu .logo > img {
    max-height: 35px;
    width: auto;
  margin-right: 25px;
  }


/* Vantage: Full width adjustment */
body.responsive.layout-full #page-wrapper header#masthead .full-container {
max-width: 95% !important;
margin: 0 auto;
}


.layout-full #colophon {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 10px;
    padding-top: 0px;
}

    The URL is http://einfachgeri.de

    Thanks for your fast answers!

    BR
    Gerald

  5. 9 years, 6 months ago Daniel
    Hi, I Work Here

    Hi Gerald

    That’s odd

    Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:

    [email protected]

    Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.

    Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.

  6. 9 years, 6 months ago Private Message - WordPress

    This is a private message.

  7. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Sorry about that! It should have been:

    /* Vantage: Full width adjustment */body.responsive.layout-full #page-wrapper .full-container {max-width: 95%;}

    My bad. Try removing the initial selector I sent for this and try the above.

  8. 9 years, 6 months ago Gerald Ahlswede

    Hey Andrew,

    thanks for the code. It works better but: why is on the left/right side these big Gap? I´ve changed it to 98%, but nothing changed. Some ideas?
    A funny note: the code that you sent me is changed each time. From

    / * Vantage: Full width adjustment * /

    to

     / * Vantage: Full width adjustment / *
  9. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Sorry about that, another mistake! I edited my earlier CSS when I last commented.

    /* This is a correct CSS comment */

    The incorrect comment ending would have caused problems below it in the CSS.

  10. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    The gap on either side is the padding from the main div. You can adjust it as follows:

    #main {
padding: 35px 35px 35px 35px;
}

    Each value represents a side, top, right, bottom, left.

  11. 9 years, 6 months ago Gerald Ahlswede

    Hey Andrew,

    thanks for your help!
    I´ve changed it to

    #main {
padding: 17px 0;
}

    and now is everything fine.

    Have nice WE!

  12. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Awesome, glad to hear that did the trick.

    All the best :)

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