sacredpath
(@sacredpath)
Automattic Happiness Engineer
Hi there, are you talking about the blog page that shows your posts in the grid, or are you talking about on single post pages (after you click through to the full post)?
If your site is live, can you provide a link to it please? If not, or if you are still in development, can you at least tell me if you have sidebar widgets on your single post pages? The demo site has a sidebar on single post pages, so widening things would be more complex.
Hello,
I’m talking about single post pages. The website is MateOverMatter.com
Single post pages do have sidebar widgets, but if something needs to go, it wouldn’t be those. It would be the tags and dates on the left-hand sidebar, which the theme doesn’t allow you to get rid of.
sacredpath
(@sacredpath)
Automattic Happiness Engineer
Looking at the CSS, the tags move down below the content on screens/windows 1379px and narrower What we can do is to make that happen at 1380px and wider, giving more room for your content. One thing I’ll mention is that the “golden rule” for text content on the web is to keep it at about 66 characters per line for readability. Currently yours is at about 69 characters. The following custom CSS moves the date/author/tags down below the content at 1380px and wider and takes your content full width.
@media screen and (min-width: 1380px) {
.single .entry-footer {
width: 100%;
}
.single .entry-content {
width: 100%;
}
}
For images inside your posts, you will have to make sure they are 930px in width or wider if you want them to be the full width of the post content area. On one post I saw you have inserted the image at “large” instead of “full-width”, so on those post were the image is inserted at Large, it will no longer be full width of the content area.
Hello,
Thank you for the prompt response.
A few questions:
– I know this is a novice-level question, but do I just copy and paste your custom CSS into my header file, or somewhere else?
– For images, there’s no option for “fill-width,” only “full-size.” I can play around with this as needed.
– In terms of the characters per line, I made my window a bit narrower (to see the tags move at 1379px) and noticed that the lines of text still don’t take up majority of the left-hand side. They take up more space, but could still take up more. Does increasing how much space they take up have to do with changing the characters per line? If so, what’s the best way to do this?
Thanks in advance.
sacredpath
(@sacredpath)
Automattic Happiness Engineer
@askmateo, in your dashboard, go to Appearance > Customize > Additional CSS and delete all the informational text and then copy and paste the CSS in there and save.
You are the man, sir! Thank you for all of the help.
Side note, I somehow ended up on your personal blog, and loved reading about your journey to, and life in, Hawaii. Have a wonderful day, and enjoy those Macadamia trees!
sacredpath
(@sacredpath)
Automattic Happiness Engineer
Thanks, and you are welcome. 🙂
