- This topic has 7 replies, 2 voices, and was last updated 4 years, 10 months ago by
.
-
Posts
-
Hi, I have tried reducing the height of the featured images via Layout > Blog > Featured Images > Height PX 420 (Desktop). But if I set this for desktop the aspect ratio is wrong for tablet and mobile. The height setting here seems to carry across all 3 Desktop / Tablet / Mobile views. How can I reduce the height of the featured image and maintain the same (or similar) aspect ratio for tablet & mobile views ? Thanks
Customer Support
Hi there,
thats correct – the way WP works is using src-set images, which creates various sizes of the Image, but they will all use the same aspect ratio. Various aspect ratios, known as Art Direction isn’t supported in the WP image function so having different ratios can only be achieved with CSS.
If you want to change the image sizes so they display correctly on mobile, then share a link to your site i can provide some CSS to change them for desktop.
Hi, Thanks my site is https://makemesustainable.com but its in maint mode so you won’t be able to view it unless you log in using the credentials provided below. The Desktop image height is currently set to 420 px Thanks
Try adding this CSS to remove the fixed ‘height’ on smaller devices:
@media(max-width: 768px) { .resize-featured-image .post-image img { height: auto; -o-object-fit: unset; object-fit: unset; } }Hi, Thanks. Works a treat for Mobile view but not for Tablet, is there anything that can be done there ?
In the first line of the CSS ie.
@media(max-width: 768px) {You can change 768 to 1024 to include Tablet.
Thanks
You’re welcome
- You must be logged in to reply to this topic.
