Wider blog content of the blog posts

nataschaleisi · Member · Jun 13, 2017 at 7:10 pm
Copy link

Add topic to favorites
I would like the blog posts as wide as the featured pics, that all the content on the page (preview of blog posts, the blog post itself) is as wide as the featured posts.

How can I do this in the CSS?

Thx

The blog I need help with is: (visible only to logged in users)
nataschaleisi · Member · Jun 13, 2017 at 7:10 pm
Copy link
sorry forgot to mention: the theme is OLSEN
thesacredpath · Member · Jun 14, 2017 at 3:38 am
Copy link
Hi there, first off, when text gets too wide, it becomes more difficult to read, and extending your posts to the width of the post slider at the top will make the text over 1000px wide, and generally the best width for ease of reading is 500-750px. As it is right now, the text is about 670px, which is right in the middle of that range.

To make the posts as wide as the post slider at the top, go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS, and then in the Media Width field below the CSS entry area, enter 1040.
```
.blog .content-area, .single .content-area, .archive .content-area {
	margin-left: 0;
	width: 100%;
}
```
The above does your blog (main page), date archive, category and tag, and single post pages.
nataschaleisi · Member · Jun 14, 2017 at 1:23 pm
Copy link
Hi, that’s great, thank you very much. I will place the text in the blog post next to a picture, in order to keep it easy to read it.

Unfortunately the “preview” of the blog posts on the ‘home’ page (https://wordpress.com/customize/thebluepassionfruit.blog) are not displayed on the full size. How can I change this?

Or does a CSS code exist to place the picture of the preview of the blog post on the left and the “preview text” on the right directly next to the picture (not as currently the picture and the intro text underneath)?
thesacredpath · Member · Jun 15, 2017 at 1:04 am
Copy link
Hmmm, the featured images are not picking up on the Media Width at Customize > CSS. Add the following to your custom CSS to make the featured images go full width.
```
.entry-featured img {
	width: 100%;
}
```
nataschaleisi · Member · Jun 15, 2017 at 4:50 am
Copy link
Great! That worked – thank you!
And is there a possibility, in order to read the text more easily in the preview of the blog posts on the ‘home’ page, to have the “featured” pic on the left, and the text on the right (and vice versa)?
thesacredpath · Member · Jun 15, 2017 at 5:36 am
Copy link
You can try something like this, but due to the short length of the excerpt, it looks a bit off. I’ve split it 60% width for the image and 35% for the text. The missing 5% is to provide some space between them.
```
@media screen and (min-width: 768px) {
.blog .entry-content a {
	display: inline;
}
.blog .entry-content a img {
	width: 63%;
}
.blog .entry-content p {
	width: 35%;
	float: right;
	margin-top: 0;
}
}
```
I’ve also used a Media Query to limit this to screens 768px and wider since below that the text gets pretty narrow.
nataschaleisi · Member · Jun 15, 2017 at 7:01 am
Copy link
This is perfect – thank you very much!!!
thesacredpath · Member · Jun 15, 2017 at 8:52 am
Copy link
You are welcome.
nataschaleisi · Member · Jun 16, 2017 at 2:16 pm
Copy link
Hi, sorry to bother you again… Is there a possibility to do the whole content area a little bit wider: header, featured post, previews of blog posts, everything, the whole website content… Is that possible (layout same as it is now)?
thesacredpath · Member · Jun 16, 2017 at 8:10 pm
Copy link
Add this to the bottom of your custom CSS and see what you think.
```
@media screen and (min-width: 1200px) {
.container {
	max-width: 1200px;
	width: 100%;
}
}
```
nataschaleisi · Member · Jun 16, 2017 at 8:23 pm
Copy link
thank you!!!!! great.
thesacredpath · Member · Jun 17, 2017 at 12:05 am
Copy link
You are welcome.
nataschaleisi · Member · Jun 21, 2017 at 7:51 am
Copy link
hi,
Any code to have the layout as on the home page on all the pages?

The pics on the left and the text on the right as it is on the home page (https://thebluepassionfruit.blog/), to have it also on the different pages (for example on the lifestyle page with the previews of the posts: https://thebluepassionfruit.blog/category/lifestyle/ ?

Thanks in advance
thesacredpath · Member · Jun 21, 2017 at 6:47 pm
Copy link
Hi there, add this to the very bottom of your custom CSS. It will make the category, tag and date archive pages look similar to your main page. I’ve used a Media Query to limit this to screens/windows 768px and wider.
```
@media screen and (min-width: 768px) {
.archive a.entry-featured {
	display: inline-block;
	width: 62%;
}
.archive .entry-content p {
	width: 35%;
	float: right;
	margin-top: 0;
}
}
```
nataschaleisi · Member · Jun 21, 2017 at 7:57 pm
Copy link
perfect, thanks for your help :-)
thesacredpath · Member · Jun 21, 2017 at 9:20 pm
Copy link
Hooray and you are welcome!

No items found.