Hi,
I want my products to appear in a proper organized and same size on the collections page without having to resize or upload the images again. I am familiar with coding and I dont want to use apps please. I am on dawn theme https://evefurn.com/collections/sectionals
Topic summary
A Shopify store owner using the Dawn theme wants to display collection page product images at uniform sizes without resizing/re-uploading images or using apps.
Initial Solutions Proposed:
- Adding CSS to set fixed image dimensions (width/height: 400px)
- Using
.card__inner {height: 222px;}to standardize card heights
Current Issue:
The .card__inner CSS fix worked perfectly for desktop view, but now causes images to crop incorrectly on mobile devices.
Status: The discussion remains open with the user seeking a solution to prevent mobile image cropping while maintaining uniform sizing across devices. The challenge involves finding CSS that adapts responsively to different screen sizes without distorting product images.
Try to use codes to achieve this purpose.
Just add the following code to your theme’s CSS file:
img {
width: 400px;
height: 400px;
}
Go to “Online Stores” - “Themes” and choose “Edit code.”
Then, find the CSS file of the Dawn theme, and add the code accordingly.
You can try and see whether this works or not.
I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.
Please add this css in your bottom of the css file:
.card__inner {height: 222px;}
Regards,
San
Thank you so much! I am trying since months nothing worked. This worked like charm
I actually have a followup question. doing “.card__inner {height: 222px;}” did fix the problem for the desktop but now the images are cropped on the mobile. How can I fix that problem.
Thanks again!
https://evefurn.com/collections/living-room-sets
