Optimise Blog Images and Increase Spacing

Support
#1

Hello there

I’m currently using X Theme with the Ethos stack and have a couple of questions about the blog layout.

Firstly, is there a recommended image size for blogs? The featured image in the attached screenprint is 800 pixels wide but only extends three quarters across the blog page. I would like it to extend across the width of the text.

Also I’d like to increase the spacing between the featured image and blog title as shown in the screenshot. Can you please let me know how to do this?

Finally, when I add a blog instead of saying ‘By’ next to the author’s name and date, the wording says ‘In’. I understand from other blogs that this is because ‘In’ often precedes the category in which the blog is posted. However, I don’t know how to show the category or turn the option off all together! We do categorise our blogs, so I don’t know why it’s not showing. . Also, is there a way to manually override the author’s name instead of having to create them as users? I often post on behalf of other members of staff so this would be particularly useful.

Looking forward to hearing from you.

#2

Hi There,

The best size for the featured image in your post page should be: 1200x450.

If you don’t want to increase the size, you can use this custom CSS to force the width of images:

.single .entry-featured {
    margin-bottom: 25px;
}
.single .entry-thumb img {
    width: 100%;
}

Hope it helps :wink:

#3

That’s really great, thank you.

#4

You’re welcome.

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.