If you are using the loop templates and want to limit the height of the image without cropping, you can use this code snippet. If you are using WooCommerce, make sure you set the Thumbnail Cropping to “Uncropped” in the Theme Customizer > WooCommerce > Product Images.
Description:
Add this code to limit the thumbnail height of loop template thumbnails across the entire website
Language: CSS
Where to add: Divi Theme Options
/* Limit the height of thumbnails in all loop template Archive/Product Loops */
.divi-filter-archive-loop .daf-template-loop .et_shop_image img,
.et_pb_blog_grid .divi-filter-archive-loop .et_pb_post .et_pb_image_container img {
max-height: 150px; /* Set the maximum height of the images */
width: auto;
}
.divi-filter-archive-loop .daf-template-loop .et_shop_image
.divi-filter-archive-loop .et_pb_post .et_pb_image_container {
text-align: center; /*Align the images in center*/
}
Description:
Add this code to limit the thumbnail height of loop template thumbnails to any Archive/Product Loop with the class "de_limit_loop_template_thumb_height". Add the class "de_limit_loop_template_thumb_height" to the Archive/Product loops that you want the code to take effect.
Language: CSS
Where to add: Divi Theme Options
/* Limit the height of thumbnails in loop template Archive/Product Loops with the class: de_limit_loop_template_thumb_height*/
.de_limit_loop_template_thumb_height .divi-filter-archive-loop .daf-template-loop .et_shop_image img,
.de_limit_loop_template_thumb_height .et_pb_blog_grid .divi-filter-archive-loop .et_pb_post .et_pb_image_container img {
max-height: 150px; /* Set the maximum height of the images */
width: auto;
}
.de_limit_loop_template_thumb_height .divi-filter-archive-loop .daf-template-loop .et_shop_image,
.de_limit_loop_template_thumb_height .divi-filter-archive-loop .et_pb_post .et_pb_image_container {
text-align: center; /*Align the images in center*/
}
Easy | CSS
Nov 14 2024
Easy | CSS
Aug 27 2024
Easy | CSSJavascript
Jul 10 2024
Easy | CSS
Feb 29 2024
From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.
Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.
A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.
Let clients update content without touching the Divi Builder. Design layouts once, connect them to Flexible Content fields, and give editors simple forms for text, images, and sections.
Unlock the Full Power of Divi 5 Loop Builder Add advanced sorting, filtering, and relationship logic right inside the Visual Builder.
Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.
Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active
Filter WooCommerce, Posts & Custom Posts without reloading the page.
Divi Mobile helps you create beautiful looking mobile menus without having to code.
Give your Divi website that extra boost of speed with our Divi Nitro plugin to enhance your customer's experience.
Password protect the content of your Divi website with our Divi Protect plugin. Keep unwanted eyes out!
Create stunning, responsive, and content-rich mega menus using the Divi Builder you already know. No coding required.
