Image size grid
Hello, I have tried in various ways that the grill of the listed products all appear the same size but so far I have not succeeded. Looks like I chose the images in masorny instead of grid. What can I do to make the grills with images of the products all the same size when listed?
Comments
Hi,
Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.
It is always a good idea to also attach a screenshot showing your issue.
Thanks
Hey,
Please send us the WordPress dashboard and FTP access privately thru the contact form, which is on the right side at http://themeforest.net/user/muffingroup#contact, and we will check what might be the reason.
Notice!
Please attach a link to this forum discussion.
Sending incorrect or incomplete data will result in a longer response time.
Therefore, please ensure that the data you send are complete and correct.
Thanks
Sorry, I forgot to remind you that a screenshot would be useful.
Right now I am not sure where I should look at, and what is wrong.
Thanks
I think this image indicates the problem.
What I want is for the products on the grid to always be the same size according to the red line and not each product having its own size.
I think it has to do with the size of the images but I have already tried to regenerate the images both through your panel and through other plugins, I have already deactivated all the plugins, I have already checked other topics and without success. When checking if you need to remove or change something you can do so. I just want it to work well.
Try the following CSS code:
.products{ display: flex; flex-wrap: wrap; } .products .mfn-product-li-item{ display: flex; flex-direction: column; justify-content: center; align-items: center; } .products .mfn-product-li-item .mfn-li-product-row-title{ margin-top: auto; } @media only screen and (max-width:767px){ .products .mfn-product-li-item{ margin: 1%!important; } }Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.
Best regards
The code you sent worked perfectly! thank you very much!
Hello again, regarding this subject I was checking further and although the products are all the same size in the grid, as the images do not shrink, sometimes the image comes out much higher or lower, so the description text also suffers. with the changes as you can see in the images I attach. Is there a way to force the displayed images to have the same dimensions and align on top for example ?
It depends on image sizes as some of them are horizontal while some are vertical. If we would give you custom css for fixed height, it may not look good as well. If you will send link to page with those products, i will have a look.
Hello, the page link is.
https://reinicia.online/shop/
You can scroll down and check whether the images are now small or large, aligned at the top or starting to appear at the bottom. The idea would be to have a formula so that the image (even if it were smaller) would all be the same size.
If you want images to look exactly the same, they all should be same size or at least proportions.
Is there any way to do this automatically?
In this case, isn't there an option to automatically resize the image and present it with dimensions, for example, 300px by 300px?
This is WooCommerce feature and you will find all details about it in Woo doc https://woocommerce.com/document/image-sizes-theme-developers/