Your image is a bit small and hence why it "stretches". You need to use an image that has a 16:9 aspect ratio for the image to be more responsive. Here's an article that will guide you on the recommended image sizes for WordPress https://enginescout.com.au/wordpress-image-sizes/.
Alternatively, You can add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
My apologies for not being more clear earlier in the explanation that I had not added the Custom CSS after having received the warnings, at which point I asked whether I should be concerned - i.e.: should I save the CSS.
Until receiving a reply, not saving & running potentially unsafe code seemed proper.
I must also apologize for not being more clear when describing my earlier testing.
Before reaching out to ThemeNectar on the forums here, high & low resolution images in both 16:9 and 4:3 aspect ratios with and without parallax scrolling were attempted.
How can I make the featured image resize? https://fieldoperative.com/glossary/chatgpt/
Hey Buck,
Thank you for reaching out to us.
Your image is a bit small and hence why it "stretches". You need to use an image that has a 16:9 aspect ratio for the image to be more responsive. Here's an article that will guide you on the recommended image sizes for WordPress https://enginescout.com.au/wordpress-image-sizes/.
Alternatively, You can add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.postid-7011 .featured-media-under-header__featured-media .post-featured-img img { object-fit: contain; object-position: center; }I hope that helps.
Kind regards,
Hi Andrew - Thanks for the instructions.
Previously, I only included the last test; It used a 4:3 aspect ratio at lo rez.
This was after testing high & low 16:9, and a high 4:3 image.
None resized correctly.
Attached is what I’m getting with the alternate CSS suggestion:
Should I be concerned about the warnings?
Attached files: CSS question 1.png
Hey Again,
Please remove the Custom CSS provided and use a 16:9 ratio image to have it show up correctly.
Thanks
ThemeNectar Support Team
My apologies for not being more clear earlier in the explanation that I had not added the Custom CSS after having received the warnings, at which point I asked whether I should be concerned - i.e.: should I save the CSS.
Until receiving a reply, not saving & running potentially unsafe code seemed proper.
I must also apologize for not being more clear when describing my earlier testing.
Before reaching out to ThemeNectar on the forums here, high & low resolution images in both 16:9 and 4:3 aspect ratios with and without parallax scrolling were attempted.
Thoughts?
Thanks for the explanation, could you upload a 16:9 ratio image again so we can check ?.
ThemeNectar Support Team
A couple of Salient updates arrived yesterday, and seem to have fixed the main problem.
Feel free to close this ticket.