Featured Image on Posts is Blurry

Hello,

Could you please let us know which element are you using to add blog list? Also, if the thumbnail images are used for blog list, then you can adjust thumbnail size in Settings > Media (please see screenshot). This could also be due to the lazy loading feature for images added in WordPress 5.5 version. Please try installing the Disable Lazy Load plugin.

Best,
Qode

Hi. We’re using an element on the WordPress dashboard called Posts. It has a pushpin icon next to the word Posts. It’s at the top of the same black menu from your screenshot. We don’t use Elementor for the Posts because Elementor doesn’t let us adjust images on Posts.

We just switched the feature image to a 1008x628px file called “Tackle Hunger Cereal4all 2022 post crop.jpg”, but when we right-click on it, WordPress has somehow changed the file name to “Tackle-Hunger-Cereal4all-2022-post-crop-300×187.jpg” and it’s blurry. If we can understand what’s causing this, it would probably help solve the problem.

We also tried adjusting the Thumbnail size like you suggested, but it didn’t have an effect.

We installed the Disable Lazy Load plugin, but haven’t seen an improvement yet.

It seems like a setting we’re missing that’s affecting the Posts images specifically.

• This reply was modified 2 years, 2 months ago by jandl2022.

Hi,

Once we inspect the page we see that you are using Qi Full Width template and that the blog list is added with some blog list element. If you are using “Blog List Essentials” and you’ve set Image Proportions to some other option than “Original” (please see screenshot) then you might need to regenerate thumbnails. To do this please try installing Regenerate Thumbnails plugin. Then navigate to Tools -> Regenerate Thumbnails, leave both checkboxes unchecked and click on the ‘Regenerate Thumbnails For All xx Attachments’ (please see screenshot).

Best,
Qode

Thank you for your help! the post images are fixed.

Can we please ask two other questions that we cannot solve…

On our home page https://cereal4all.org/ there are two pieces of pink text above and below the image carousel that are problems…

1)The text that begins with “Donating a box of cereal may seem like a small thing until you visualize that cereal making its way…”, we want that text to break between “cereal” and “making” so the two lines are more even.

1b) And an even bigger problem is that although that text looks okay on desktops, it looks gigantic and takes up full screens on mobile.
Do you have any advice on this? Is there a different method we should be using?

2) The text carousel below the image carousel that says “Start a Cereal4all Drive like these amazing partners” and has names under it…for some reason it slides into position when the webpage is opened and scrolled through (instead of being fixed in place like everything else).
Can you tell why?

Should we repost this as a new question?

We are extremely appreciative for the help!

Hi,

1) To adjust width of the text you can set it in a smaller column and also adjust column width to suit your needs. You can find more info in Elementor documentation here.

1b) In Qode Essential Addons > Options > Typography you can set font size for each heading on different stages (please see screenshot). For theme options to be applied please make sure to check “Disable Default Fonts” option in Elementor > Settings as shown in screenshot.

2) Please check if you’ve perhaps added some Motion Effects in Advanced tab.

Feel free to check our handy tutorials about our theme here; as well as Elementor tutorials which you can check as there are many options that can be achieved both through our themes options and Elementor options.

Best,
Qode