Expanding width of site with CSS

thooleiblog · Member · May 18, 2016 at 3:37 am
Copy link

Add topic to favorites
Hi there,

I’m currently using the Organization theme and would like to expand the width of my site as much as possible (preferably so it covers the whole screen).

I was told this will require extensive customisation with CSS, and that I need to edit a few selectors without access to the template. As someone not familiar with this process, can anyone here help to guide me through this at all?

Many thanks,

Alex

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 18, 2016 at 5:49 am
Copy link
Hi Alex, this is doable, but first, when it comes to text content, the general rule is that it should be between 500 and 750 pixels in width (it’s more complicated than this, but this is a pretty good general rule). Any wider than that and it reduces readability, and the wider it gets, the less readable it becomes. Right now, if you look at your About… page, that page has a maximum width for the content of 980px. As you narrow your screen, the content width will narrow as well so that it is always presented in the most readable way for your visitors.

Perhaps if you can explain what it is you are trying to achieve, we can come up with a plan to accomplish that without causing readability to suffer for your visitors.

If you wish to try this for yourself and see, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS, save and publish and then visit your About… page and maximize your browser window.
```
.container, .row {
    width: 100%;
    max-width: 100%;
}
```
thooleiblog · Member · May 19, 2016 at 8:59 am
Copy link
Hi there,

Thanks for your guidance thus far. I’ve changed the CSS and, in terms of the initial look of the homepage, it’s had the desired effect, although the text as you mentioned has become an issue.

What I’m trying to achieve is to improve the layout – I want to stretch the width of the website so that it covers much more of the screen (i.e. there is less grey space on either side), but without affecting the readability of the text.

At present, the text now stretches across the screen — I would like to reduce this by at least a third – or whatever you recommend. I’d be grateful if you could let me know how I change the pixels width of the text content, along with any other CSS info I’d need to alter, too.

Cheers
thesacredpath · Member · May 20, 2016 at 12:55 am
Copy link
Give this a try and see what you think. It sets the max width of the white area and header at 1200px and then sets the content at 1000px wide giving a text content area of around 925px.
```
.container, .row {
    max-width: 1200px;
    width: 100%;
}
.row .twelve {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    float: none;
}
```
thooleiblog · Member · May 27, 2016 at 7:59 am
Copy link
Many thanks,

I have changed the CSS as advised and now the text looks much better on all pages, the only issue left is with the width of the homepage as well as the header images on all other pages. I tinkered with the CSS myself and it seems to have made a small difference, albeit only to the homepage.

Here is an example of the homepage look I’d like to create:

And here are the login details so can you see the other pages for yourself:

[mod: redacted]

Thanks in advance,

Alex
thooleiblog · Member · May 27, 2016 at 8:48 am
Copy link
Sorry, I forgot to add the link to the website I’m working on:

http://www.bawgataproject.com

Thanks
rachelsquirrel · Member · May 27, 2016 at 9:21 am
Copy link
Hi Alex,

I’ve removed your login details for security reasons. Always keep your username and password private.

For the page width, try increasing the max-width in your CSS for .container .row.

.container, .row {
max-width: 1300px;
width: 100%;
}
thooleiblog · Member · May 27, 2016 at 9:27 am
Copy link
Great, thanks, I forgot this can be seen by others and wrongly assumed it was private.

Will try tinkering again with your info but may come back if I can’t get it quite right.

Thanks!
thooleiblog · Member · Jun 7, 2016 at 7:44 am
Copy link
One last question — I’ve changed the settings to the below and i’m happy with the width of the pages; the problem is with the width of the text.

How can I alter this so that the width stays the same but the text is, say half-width instead of full-width?

Thanks,

Alex
siobhyb · Member · Jun 7, 2016 at 11:17 am
Copy link
Hi Alex,

You could edit the size of the text using the following custom CSS:
```
.page-template-template-full #postarea {
    width: 70%;
    margin: auto;
}
```
Increase/decrease the value of width to your liking. :) Let me know how that goes or if you have any extra questions.

No items found.