How to Align Photos in product pages

Solved
Highlighted
Tourist
17 0 3

Hello. As seen in the image below, the center photo is not aligned with the left and right photo. The right photo also is longer than the rest. How do I adjust so that all photos are perfectly aligned with one another?

Windsorvintage_1-1601186494209.png

 

Also, when you go to mobile view, it only shows one product on the screen. I would like to show 2 products on the screen at once, so that viewers won't have to scroll too much. How do I adjust?

 

Thank you so much

1 Like
Highlighted
Shopify Partner
8493 1131 2974

Hello, @Windsorvintage 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Shopify Partner
414 44 62

Hi @Windsorvintage ,

Share your store URL and which theme are you using? 

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
Highlighted
Tourist
17 0 3

it is windsor-vintage-co.myshopify.com

1 Like
Highlighted
Shopify Partner
8493 1131 2974

@Windsorvintage 

Thanks 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.card-list .card__image-wrapper {
padding-top: 100% !important;
.card__image {
object-fit: cover;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
17 0 3

Hi! Thanks a lot for the reply. It worked for the first two rows, but on the 3rd row it is still not aligned.

0 Likes
Highlighted
Tourist
17 0 3

bump please

0 Likes
Highlighted
Shopify Partner
8493 1131 2974

This is an accepted solution.

@Windsorvintage 

Thanks for update

yes please add this code also

.card__name {
height: 72px;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
17 0 3

It worked thank you so much!

1 Like
Highlighted
Shopify Partner
8493 1131 2974

@Windsorvintage 

Thanks for update and support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes