x

Can I make my page more wide on desktop with a theme

I have my site here http://www.newcomix.nl and I like how responsive it is. But I got asked if it cannot be more responsive and use all the white space on the sides (for desktop obviously). 
When I go in the editor it doesnt seem I cannot scale the box all the groups are in. it always seems to be stuck at about 800 pixels. Is there anyway to make this go wider?
Or is this because i have chosen groups/sections. is that why its constraint?

image

2,121 Views
Message 1 of 5
Report
1 Best Answer

Best Answer

@newcomix In addition to the suggestion by @NJRFTF, you can employ a bit of css code to allow your page content to consume a bit more page width than what is set in the theme. Out of the box, your particular theme sets a maximum banner width of 1115 pixels and a maximum content container width of only 960 pixels. Most laptop/desktop screens today have width resolutions much higher than 960 pixels so these settings waste a fair amount of available screen real estate (there is too much white space to the left and right of the page content). This is a pretty easy fix and you can tweak the numbers I provide below.

In the Site Editor, click "Settings" then click "SEO" in the left-hand sidebar then scroll down to the "Header Code" input box. Add the following code:

<style>

.banner-wrap {
/* Change maximum banner wrap size from default 1115px to 1200px */
max-width: 1200px;
}

.container {
/* Change maximum container width from default 960px to 1200px */
max-width: 1200px;
}

</style>

With this code in place, you'll see that your page content will occupy much more of the available screen real estate (less white space to the left and right of your page content). You generally don't want the max-width to be overly large (a lot more than 1200px) since this will produce undesirable results on very large screens (images will become enormous and no-one wants to read blocks of text that span a very big, wide screen).

View Best Answer >

2,093 Views
Message 6 of 5
Report
4 REPLIES 4

@newcomix 

Using "full-width body" is an option that some themes have built-in - for example the Weebly "Birdseye 2" theme has the option in the Editor....

image

2,115 Views
Message 6 of 5
Report

Thank you very much!

2,105 Views
Message 6 of 5
Report

Best Answer

@newcomix In addition to the suggestion by @NJRFTF, you can employ a bit of css code to allow your page content to consume a bit more page width than what is set in the theme. Out of the box, your particular theme sets a maximum banner width of 1115 pixels and a maximum content container width of only 960 pixels. Most laptop/desktop screens today have width resolutions much higher than 960 pixels so these settings waste a fair amount of available screen real estate (there is too much white space to the left and right of the page content). This is a pretty easy fix and you can tweak the numbers I provide below.

In the Site Editor, click "Settings" then click "SEO" in the left-hand sidebar then scroll down to the "Header Code" input box. Add the following code:

<style>

.banner-wrap {
/* Change maximum banner wrap size from default 1115px to 1200px */
max-width: 1200px;
}

.container {
/* Change maximum container width from default 960px to 1200px */
max-width: 1200px;
}

</style>

With this code in place, you'll see that your page content will occupy much more of the available screen real estate (less white space to the left and right of your page content). You generally don't want the max-width to be overly large (a lot more than 1200px) since this will produce undesirable results on very large screens (images will become enormous and no-one wants to read blocks of text that span a very big, wide screen).

2,094 Views
Message 6 of 5
Report

Ah yes this is perfect! indeed its all you say, its just a little bit too small.
The other solution to picka theme and put the body to full width was a bit undesirable. The images went from one side to the other side of the page, no white space at all. That wasnt what I wanted for a portfolio gallery.

So the solution is to use the header ccs code!

2,055 Views
Message 6 of 5
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.