Increase Width of Website in Broadsheet

hohcatholic · Member · Oct 29, 2015 at 1:42 am
Copy link

Add topic to favorites
Hello,

I’m looking to get rid of the blank background space on the sides of the main content, header, and footer areas (essentially just covering the space that is currently green so that it shows full width. Wondering if that can be done by CSS?

Thank You!

-Nick

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 29, 2015 at 7:00 am
Copy link
Hi there, first off let me mention that really wide text content is harder to read, and in general, although it is more complex than this, the best width for reading is between 500 and 750px. By making the site for full-width, it may make things more difficult for your visitors to read. That said, you can add the following CSS to make the content go full width.
```
.container {
    max-width: 100%;
}
```
hohcatholic · Member · Oct 30, 2015 at 1:50 pm
Copy link
Okay this is good. Is there a way I can shorten the width of the post slider so that it isn’t 100% width?
thesacredpath · Member · Oct 30, 2015 at 8:17 pm
Copy link
Hmmm, how much narrower do you want it? It gets tricky due to the green block at the bottom with the titles in it. I tried aligning the slider with the content below, and it doesn’t work out well. See what you think with this CSS. Make sure and widen and narrow your browser window and view it on a phone, and tablet if you have one.
```
.primary-content {
    margin-left: 16.6667%;
    margin-right: 25%;
    max-width: 80%;
    padding-left: 13px;
    padding-right: 13px;
}
.primary-content .primary-wrapper .item .image-meta {
    bottom: 0;
}
```
hohcatholic · Member · Oct 30, 2015 at 8:43 pm
Copy link
Awesome. One last thing – above we changed the width. What about the height of the slider? If the height can be adjusted too I can compensate that with the change in width to keep the same aspect ratio on the featured images.
thesacredpath · Member · Oct 30, 2015 at 9:57 pm
Copy link
Before I forget, in the following rule, change top: 307px; to bottom: 0; so that the titles don’t flow over onto the content below and become invisible.
```
.primary-content .primary-wrapper .item .image-meta {
    background-color: rgba(32, 181, 5, 1);
    left: unset;
    right: 0;
    bottom: 0;
}
```
We can reduce height, but the issue with that is that then the green title block ends up covering a good bit of the image and doesn’t look good. You can give the following a try. The original heights were 350px. To make this work and not obscure too much of the image, the second rule below makes the titles smaller.
```
.primary-content .primary-wrapper .item a.thumbnail, .primary-content .primary-wrapper {
    height: 250px;
}
.primary-content .primary-wrapper .item h2 {
	font-size: 20px;
	line-height: 1;
	position: relative;
	top: 5px;
}
```
See what you think with this.
hohcatholic · Member · Oct 30, 2015 at 10:27 pm
Copy link
Awesome! I modified it a little and it’s great.

Thanks!
thesacredpath · Member · Oct 31, 2015 at 7:17 am
Copy link
Super, and you are welcome.

No items found.