How do I fix Product information aligment on mobile

Store Design
,
1

Hello as you can see in this image, I am making product pages with my images but on mobile you can see for all my images the slider and the image are slightly off center. I want to make it appear more centered but have no clue on how to do so. This is using the Ride theme for my store.

Any help would really be appreciated, Thanks.

https://imgur.com/a/lLfe6Ao

1 Like
2

Hi @zukka0

Can you provide your website? I do not see this issue in default Ride theme

3

it’s only a issue when you apply 2 images to the page because it creates room for the slider to slide onto the next image but it looks bad due to it being off center.

4

Hi @zukka0

Thank you for providing your website. You can use the code below to fix the issue

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the base.css file
  3. At very end of the code, add the code below
@media only screen and (max-width: 749px) {
.product__media-wrapper slider-component.slider-mobile-gutter {
    margin-right: -6%;
    margin-left: unset;
}
}
5

Hello, thanks for the help but this didint change the alignment of anything it’s just remained the same I copy pasted it as you said. I even tried editing it in certain ways but nothing changed.

Do you have any idea what might be wrong?