The small Featured Images on the News posts are blurry. We are sure the images we are choosing on the WordPress Dashboard in Posts are high resolution enough because we can see the file name and size in Dashboard, but we noticed that when we publish them and go into the website and right-click to open the images in a new tab, the images are now shrunken down tiny and blurry. We also noticed sometimes, those image file names are changed to include the word scaled.

Do you know why this is happening or what setting we need to adjust? The same chosen featured image isn’t affected when also used as the banner inside the News post, but only blurry in that Featured Image spot.

We’d be super appreciative for any help.

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

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.

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

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!

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