Written by Dan Mossop
By default the Divi Theme will stretch featured images to the width of the post area. If you'd like to disable this and have the images display at their actual size, you can do so by adding the following CSS to the theme:
body.single article.has-post-thumbnail > img:nth-of-type(1) { width:auto !important; height:auto !important; }
body.single article.has-post-thumbnail .et_post_meta_wrapper > img:nth-of-type(1) { width:auto !important; height:auto !important; }
We may earn a commission when you visit links on our website.
Enabling swipe navigation in the Divi Gallery module's lightbox allows users to seamlessly browse through gallery images by swiping left or right, creating a more interactive and mobile-friendly experience. This functionality can significantly improve user engagement...
Control how images appear in your Divi Gallery module by toggling the slide-in animation effect for grid layouts. Disabling the slide-in animation allows gallery images to load instantly and appear statically, providing a faster and distraction-free browsing...
Displaying or hiding the image count in the Divi Gallery module’s lightbox can help customize the user experience, depending on whether you want to give visitors an indication of gallery progress or prefer a cleaner, distraction-free view. The ability to toggle this...
Displaying image titles in the lightbox overlay of the Divi Gallery module can sometimes be distracting or unnecessary, depending on your website’s design and user experience goals. Hiding these titles creates a cleaner and more focused viewing experience for visitors...
Enhancing the navigation experience in your Divi Gallery module can make your galleries more intuitive and visually appealing for visitors. By replacing the default previous and next pagination links with your own text and icons, you can better align the gallery...
That's awesome it works like charm
That's amazing to see thanks man
Great! Worked like a charm!
Great! Thanks, Janos :)
That worked for me :) Thank you so much
You're welcome, David!
Thank you you just made my day!!!!
great thank you!!
Thanks! Super helpful. Here's the code to reduce the image to 70% instead of the original size and center it, while having it be 100% for mobile devices.
/* modify blog post image size to be 70% */
@media all and (min-width: 768px) {body.single article.has-post-thumbnail > img:nth-of-type(1) { width:70% !important; height:auto !important; margin-left: auto; margin-right: auto; display: block;}
body.single article.has-post-thumbnail .et_post_meta_wrapper > img:nth-of-type(1) { width:70% !important; height:auto !important; margin-left: auto; margin-right: auto; display: block;}}
Great! Thanks for sharing your solution, Shelia :)
Perfect Sheila, thank you and thank you for the center code!
It didn't work for me :(
Hi Gennifer, are you still having problems with this? I can see the featured images on your blog posts are currently not stretched, and set to 25% width / left aligned. I'm not sure if this is what you were hoping for or not. But if not, let me know how you'd like to have them displayed (width, alignment, etc) and I'll try to help. Thanks!
amazing, only thing that worked
Awesome. Thanks