Why is there a blank space in my product images on mobile?

Store Design
1

Anyone knows why there is a blank space in my product page at the right side, like this: (MOBILE MODE)

davidvilaa_0-1693999635516.png
davidvilaa_0-1693999635516.png412×600 53 KB

I would like to remove it, making the image product fill that blank space like in the left side.

Web: https://centralmrkt.myshopify.com

PASs: 90210

2

1- Go to online store

2- Edit code

3- open base.css file

add the following code in the bottom:

.grid–1-col .grid__item {min-width: 95% !important;}

.product__media-wrapper {padding-right: 20px !important}

That should solve the issue.

NatashaSaed_0-1693999918286.png
NatashaSaed_0-1693999918286.png528×362 47.6 KB

3

Hi @davidvilaa ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Beae_Anthony_0-1694000206205.png
Beae_Anthony_0-1694000206205.png416×577 54.2 KB

Best regards,

Anthony

4

Hi @davidvilaa ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
.slider.slider--mobile .slider__slide.product__media-item {
    margin-left: 1.5rem;
}
}