Shopify themes, liquid, logos, and UX
I have various sized images sitting in fixed white containers, but they are all aligning to the top. I'd like them to sit in the center—I've tried adding "vertical-align: middle" to every place that made sense to no avail. See attached image. Hoping there is a solution that doesn't involve going through and resizing every product image that is affected!
Solved! Go to the solution
This is an accepted solution.
This is a symptom of forcing a fixed height of 270px for the product card element:
.product-card__image-with-placeholder-wrapper {
height: 270px;
}
It also looks bad on tablet/mobile view:
I recommend removing this rule and adding some padding to the image in you're looking to add some whitespace above and below:
.grid-view-item__image {
padding-top: 1em;
padding-bottom: 1em;
}
Which should look like this across all devices:
Please share your store URL.
Here is one of the product pages: https://office-3003.myshopify.com/collections/reds-blends
@whiskified,
I have also faced this problem before.
In my opinion, it seems the images are not aligned properly by the Graphic Designer (It's difficult because of the bottle's different sizes).
For example, You might have images of sizes like 500x500 but due to bottles' different sizes, it will look irregular.
The designer should have to have the same padding (top, bottom, left, right) regardless of any size.
I think you need to have bottles of the same sizes plus the same gaps around them.
This way it will work for you.
Maybe someone has a better solution than me.
Regards,
Zeian
@whiskified,
In short good photography is a must when you are dealing with bootles.
This is an accepted solution.
This is a symptom of forcing a fixed height of 270px for the product card element:
.product-card__image-with-placeholder-wrapper {
height: 270px;
}
It also looks bad on tablet/mobile view:
I recommend removing this rule and adding some padding to the image in you're looking to add some whitespace above and below:
.grid-view-item__image {
padding-top: 1em;
padding-bottom: 1em;
}
Which should look like this across all devices:
@iDoThemesOh man—thanks for the heads up on the mobile view! Thank you so much—your solution worked perfectly. Going forward all photos will be sized consistently, for sure 🙂 THANK YOU.
No problem, feel free to mark my answer as the solution to solve out this thread.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024