Same size all products in the grill

[rorifra]

Hi,

I would like it to always be the same size for the product box (image and title)

How do it?

Regards,

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Rorifra,

Thank you for choosing our theme.

1. To make product image have same size, you should crop your product image to have same size before upload https://www.youtube.com/watch?v=IjcqEmTgCrg

2. For product title you want limit text on one line?

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[rorifra]

The title of the product can be one or two lines. Is there no way for put the fixed size or I must use CSS?. Can you help me with CSS?

Regards,

 

[Harry]

Hi,

You can add custom css code in Claue > Theme Option > General Layout > Custom CSS to display product title in one line

.product-title a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
width: 100%;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[rorifra]

I don´t want  crop the product image before upload… we can not put a size maximum for the image?, If it is larger this size fits and if it is smaller it is displayed in the center. This with CSS?

Regards,

[Harry]

Hi,

It work if your image have same ratio

Example image1-800×1000, image2-400×500, image3-1600×2000

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[rorifra]

But you can´t make like attached image? … WordPress shows gallery with images same size

I can´t put all images with same size or ratio

Regards,

 

 

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

You can add custom css code for your site in Claue > Theme Option > General Layout > Custom CSS

@media only screen and (min-width: 1366px) {
.product-image-flip {
height: 304px;
overflow: hidden;
}
}
@media only screen and (min-width: 1280px) {
.product-image-flip {
height: 279px;
overflow: hidden;
}
}
@media only screen and (min-width: 1024px) {
.product-image-flip {
height: 279px;
overflow: hidden;
}
}
@media only screen and (max-width: 800px) {
.product-image-flip {
height: 262px;
overflow: hidden;
}
}
@media only screen and (max-width: 480px) {
.product-image-flip {
height: 250px;
overflow: hidden;
}
}
@media only screen and (max-width: 414px) {
.product-image-flip {
height: 210px;
overflow: hidden;
}
}
@media only screen and (max-width: 375px) {
.product-image-flip {
height: 180px;
overflow: hidden;
}
}

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[rorifra]

Yes, this is but it doesn´t work responsive version … for example mobile or tablet

Regards,

[Harry]

Sorry because some code wrong

I’ve just update again, now you can copy above code to fix it on tablet and mobile.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts