[theperfectloaf]

Hello! The featured images on the blog layout for Editor look to be blurry at my site, I am not sure why this is. I’ve modified the CSS for each post to have larger images but I haven’t touched anything for the main page. Is there a way I can get these images to not resize down to 800px but still ALSO resize correctly when viewed on a smaller screen? I’m uploading my images as 1080x720px, it would be great if I could increase the size to somewhere near there but have them also still be super sharp.

You can see an example here (each of the featured images are blurry):
https://www.theperfectloaf.com/home/

—-

Also, I would like to increase the size of my featured images at the actual POST page, I’ve done this with some custom CSS but now the image will not resize down when the view is smaller (like on a mobile device). This is the CSS I’m using:

/* increase the size of the featured image */
.single-post .featured-image img {
max-width: 1080px;
margin-left: -12%;
}

It seems if the max-width is changed at all here the image will not resize.

You can see an example here:
https://www.theperfectloaf.com/sprouted-grain-sourdough-bread/

Thank you so much for all your help!

[serkan]

Hi,
You can increase the max width for layout fixed. Thus, you get an image close to the original. The browser may have been bugged because I see a very sharp image when I check your website.

@media screen and (min-width: 992px) { .layout-fixed { max-width: 1000px; } }

In the same way, a single post also gets the size from layout fixed. Surrounding it with media quary will solve the problem.
Thanks

[theperfectloaf]

That worked perfectly.

Thanks so much for the help!

[serkan]

You’re welcome, please don’t forget to rate the theme on themeforest if you liked it, thanks.