Wider blog content of the blog posts
-
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)
-
-
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.
-
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)?
-
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%; } -
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)? -
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.
-
-
-
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)?
-
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%; } } -
-
-
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
-
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; } } -
-
- The topic ‘Wider blog content of the blog posts’ is closed to new replies.