Widening posts

davenex · Member · Dec 14, 2014 at 3:51 am
Copy link

Add topic to favorites
Hi guys,

I’ve been messing around with the CSS so that my blog fills the screen instead of having the large gap on the right. I’ve almost completed my task but I haven’t figured out how to widen the posts in the center so there isn’t gaps on either side of the posts. What code would I have to use to widen my posts so that they fill out the middle section?

my blog url is: armouredtv.com

The blog I need help with is: (visible only to logged in users)
davenex · Member · Dec 14, 2014 at 4:03 am
Copy link
also forgot to mention that i am using the 2014 theme
staff-happychia · Staff · Dec 14, 2014 at 10:11 am
Copy link
Please try the following CSS and let me know if it works for you:
```
.site, .site-header {
	max-width: 100%;
}
```
davenex · Member · Dec 14, 2014 at 12:59 pm
Copy link
that didn’t work for me, it was unresponsive
davenex · Member · Dec 14, 2014 at 2:25 pm
Copy link
}
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
max-width: 800px;
}
.site {
background-color: rgb(255,255,255);
max-width: 100%;
position: relative;
margin: auto;
}
.site-header {
background-color: rgb(0,0,0);
max-width: 100%;
position: relative;
width: 100%;
z-index: 4;
}
.site, .site-header {
max-width: 100%;
}

That is the code i’m using so far
staff-happychia · Staff · Dec 14, 2014 at 6:03 pm
Copy link
This is not the CSS I see in your custom CSS. I see the following CSS which has unexpected % tokens and the style to center the site:

.site{margin:0 auto}.entry-meta{display:none}.archive-header{display:none}#secondary .widget{font-size:14px}.site-header{text-align:center;max-width:%;position:relative;width:%}.site-content .entry-header,.site-content .entry-content,.site-content .entry-summary,.site-content .entry-meta,.page-content{margin:0 auto;max-width:1000px}

I suggest you clear everything and try:
```
.site, .site-header {
max-width: 100%;
}
```
designsimply · Member · Jan 13, 2015 at 12:24 pm
Copy link
‘ve almost completed my task but I haven’t figured out how to widen the posts in the center so there isn’t gaps on either side of the posts.

I checked http://armouredtv.com/ and it looks like you have widened the posts on the home page by using the following custom CSS:
```
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	margin: 0 auto;
	max-width: 1000px;
}
```
That will work for the home page, but if you would also like to include single posts and pages, you would want to add the container with class name “entry-content” to that list:

.site-content .entry-content

If you are expanding that area, you might also want to expand the post navigation (next/previous posts) and comments area as well. For the “max-width,” I think it would work just as well to turn it back to the default value of none rather than setting it to 1000px. Here is an adjusted CSS snippet you can try out. You should replace the snippet shown above from your custom CSS with this one:
```
.site-content .entry-header,
.site-content .entry-summary,
.site-content .entry-content,
.site-content .entry-meta,
.site-content footer.entry-meta,
.site-content .post-navigation,
.site-content .comments-area {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}
```
Another small detail I noticed is that the infinite scroll footer is not centered along with the other main content container centering that you did. To fix that, you can add this:
```
#infinite-footer .container {
	margin: 0 auto;
}
```

No items found.