Product Photos Are Not Well-aligned on Mobile View

[PeterTan]

Hi Shopify,

My product photos are not on the same horizontal line when shopping on mobile. The main product photo is higher than the second one.

Here are photo of my product page on mobile view:

P.S.

1. On mobile view, only the first product photo is higher; the rest are fine. As the following photo shows:

2. On mobile view, not all product photos are ill-organized like this; some of them are well aligned.

3. On desktop view, product photos are well aligned.

Can you help me solve this question.

Thanks a lot!

Peter Tan

[ExpertRookie]

Hi @PeterTan
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.

[PeterTan]

Hi,

My store URL: https://hallucihug.com

Product page URL: https://hallucihug.com/products/natural-amethyst-ring

No password

Thank you for your time.

[ExpertRookie]

Hi @PeterTan
In this case you can try to add this code into the bottom of the file base.css

@media screen and (max-width: 749px){
.product__media-item {
    display: flex;
    align-items: flex-start;
}
}

[PeterTan]

Hi,

I did as you advised,

but it seems that nothing happened.

The mobile view still looks like this:

[medaminebusines]

In custom CSS in Product Information section add this:

@media screen and (max-width: 749px){
.slider-mobile-gutter,
.product__media-list,
.product__media-item{
margin:0 auto;
margin-right:5px;
}}

[medaminebusines]

And also if you want to center all content for good view (image, title, price, quantity, share button) add this code :

@media screen and (max-width: 749px){
.slider-mobile-gutter,
.product__media-list,
.product__media-item,{
margin:0 auto;
margin-right:5px;
text-align:center;
}
.product__title,
.price,
.quantity,
.share-button{
margin:0 auto;
text-align:center;
}}