CSS code to widen main column in blog posts
-
Hi, I’m in Boardwalk theme and want to tweak the specs for ‘standard’ blog posts so that the text fills a wider column in the center of the screen. Presently the text fills a thin column down the middle. (A curious trait of this otherwise very attractive theme.)
My blog is http://lemonglassed.com/
A sample blog post is http://lemonglassed.com/2016/03/15/fiction-manuscripts/Thanks!!
The blog I need help with is: (visible only to logged in users)
-
Hi there, for best readability, text-based content should typically be kept in the range of 500-750 pixels in width. The formula for figuring things out is a bit more complex and takes into consideration font size and number of characters (including spaces and punctuation) per line, but 500-750 works as a general rule. As designed, Boardwalk single post pages are 768px in width.
You can add the following and play with the 768px max-width value, but for readability reasons I would suggest not going too wide.
.single .entry-author, .single .entry-content, .single .entry-footer { max-width: 768px; width: 100%; }Since you asked about single post pages, I have limited this to only those pages.
-
thank you!
You’re right. I put in the code and tried various different widths … and when the width is increased, the text is harder to read. In the end I decided to leave it at the preset.I realize that what’s really bothering me about the look is the default font in the paragraphs — it’s very small and dense compared to most newer fonts. I want font that looks more like the one used at
https://wordpress.com/read/blogs/5204535/posts/998I’m pretty sure there’s a tutorial on changing fonts, so i’m going to look around for it now. If you have words of advice about fonts, please send them my way.
thanks again!
My blog is http://lemonglassed.com/
A sample blog post is http://lemonglassed.com/2016/03/15/fiction-manuscripts/ -
To change the font size, you can add this to your custom CSS and adjust the font size as desired.
body { font-size: 16px; }You have the choice of a good selection of fonts at Appearance > Customize > Fonts. For the body content, set the Base Font. See if that works for you.
-
thank you!
I set the above code to 21px.
Do you know why it plumped up all text, including front page headings and blog page headings and subheadings? -
Hmmmm, they’ve based the other element styles (h1, etc.) off of the body text size rather than setting a unique size for those. Change what you have to this.
.entry-content p { color: #404040; font-size: 21px; line-height: 1.5; } -
I’ve used your suggestions to get my blog pages to look perfect. I ended up tweaking both the page width and font size using the CSS. Many thanks!!
Now, one last (I hope) unintended outcome. On the front page, both the font-size and column size have decreased. Can I set them back to what they were originally?
thanks again for your help. -
We can use the “not” pseudo selector to exclude the home page with the following.
body:not(.home) { font-size: 21px; } -
The code above recreates the earlier problems stemming from the fact that this theme based many element styles (h1, etc.) off of the body text size rather than setting a unique size.
After experimenting with these CSS fixes, I’ve decided to stick with the pre-sets. I took out all the customized formatting in CSS, but my home page isn’t back to normal — the 4 columns’ width is smaller and so is the font size. Do you know how I can restore the original format of the home page?
thank you!
-
Hi, there isn’t anything in the custom CSS you have that is causing the issue. As designed, the theme sets the width for individual posts on the main page at 338px, if the browser window width is greater than the 1336px width of the #main div. Below a browser window width of 1336px, the software will adjust the width of individual posts, and also the #main div so that the posts look best on the size screen/window it is being viewed on. The behavior is not something we can change since we can’t edit the theme php and/or javascript files.
-
Ok. I’m not surprised to hear it — thank you for taking the time to explain how it works.
Thanks for all your help:)
-
-
Hi Richard!
It’s been about 8 months since you last helped me…
As you recall, I am using the SELA theme for my page. If you go to my home page (BelgianBeerJournal.com) you’ll see the left hand side column (Get Social With Us, Latest Additions, etc.) is shifted more towards the center. I am using the default template there, along with other pages. I need the CSS code to shift that column so it better uses the left hand side column and is wider, so there is not as much white space to the left of it.
I would like the amount of white space on the left hand side column (to the left of it) to match the white space on the right hand side column (the white space to the right of it.)
Right now, the page looks disproportionate. Your help in providing a CSS code to fix this would make the (default page template) look better. I don’t need any tweaks for the full-width page template… that works good as is!
I look forward to your help!
Gordon
(email visible only to moderators and staff) -
Hey Gordon, add this to the bottom of your CSS and see how this works for you.
.content-wrapper .content-area { max-width: 775px; width: 100%; } .content-wrapper.with-featured-image { padding-right: 36px; } .home .entry-content p { clear: both; } -
Hi Richard,
Perhaps I did not input it in correctly… when I put in the new code, it kep the left hand side column centered, it shifted some of the text to the right side of the images, and it shifted the right hand side column way down and still to the right.
Would you be willing to edit it? You have my permission to do so.
-Gordon
-
Oops, I missed copying one CSS rule. In addition to the above, add this.
.content-wrapper.with-featured-image { margin-left: 0; } -
Yes! That did the trick! The layout is SO much better, and makes it easier to read!!!
Thank you once again for your awesome help!
-Gordon
-
Now, the only other tweak would be is for the “BLOG” page.
I would like to see the “Date” and the “Leave a comment” text flush on the left hand side, equal to the left side of the featured image.Plus, I would like to shift the column (where images and text go) to the left as well- similar to the CSS code that was provided for earlier. :)
-
Give this a try.
.blog .entry-meta span { display: inline-block; } .blog .entry-meta { width: 100%; text-align: left; } .blog .entry-body { padding-left: 0; } .blog .entry-header { margin-left: 0; margin-bottom: 0 !important; padding-left: 0; } .blog .entry-body { margin-top: 0; } -
Hi Richard…
Hmmmmmmmm… it’s not quite the look I was hoping for. I double checked that I input the CSS code as you have it above, and it is exact. I’ll leave it so you can see the results, and maybe you may have a tweak?
-Gordon
- The topic ‘CSS code to widen main column in blog posts’ is closed to new replies.
WordPress.com Forums 