On the mobile terminal, the product image in the main image cannot always be centered

Store Design
,
1

I am using the sense template. On the mobile terminal, the product image in the main image cannot always be centered. How can I solve it? As shown in the figure, the picture on the right always comes out a little bit.

未命名1687805107.png
未命名1687805107.png391×542 175 KB

1 Like
2

Hi @BellChester ,

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
@media only screen and (max-width: 450px){
ul#Slider-Gallery-template--19772884844854__main {
    display:flex;
    justify-content: center;
    align-items: center;
}
}

Result:

Ribe_Dagandara_0-1688898752213.png
Ribe_Dagandara_0-1688898752213.png381×534 166 KB

I hope it help.

1 Like
3

Thank you very much for your answer. It seems to only work for one image, the others don’t. The effect I want is: the main picture is centered, and the left and right sides of the main picture do not leak pictures.

002.png
002.png479×458 167 KB

未命名1687805107.png
未命名1687805107.png391×542 175 KB

1 Like
4

@BellChester

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (max-width: 749px){
.product__media-list .product__media-item {
   width: calc(100% - 1rem - var(--grid-mobile-horizontal-spacing)) !important;
}
}
1 Like
5

Thank you so much. You are really professional and solved my problem perfectly.

6

@BellChester

Welcome Again Thanks!

1 Like