Mobile version extend width of the product image till the end of the screen

[Zhalkesi]

Hi ,

I use the studio theme , I need my images on the product page for mobile version to extend till the screen end width like shown below .

[rajweb]

Hey @Zhalkesi

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Thanks

[GTLOfficial]

Hello @Zhalkesi
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

@media screen and (max-width: 749px) {
  .grid--peek.slider .grid__item:first-of-type {
    margin-left: 0rem !important;
  }
  .grid--peek.slider .grid__item:first-of-type {
    margin-left: 0rem !important;
  }
}

Result

If this was helpful, hit the like button and accept the solution.
Thanks

[namphan]

Hi @Zhalkesi ,

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) {
    .product__media-list.grid--peek.slider .grid__item:first-of-type {
        margin-left: 0 !important;
    }
    .product__media-list .product__media-item {
        width: 100% !important;
    }
}

[Made4uo-Ribe]

Hi @Zhalkesi

This is your current product image.

Before you add the code in the base.css remove the 3rd closing bracket:

And Add this code below the closing bracket:

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, style.css or theme.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:

@media screen and (max-width: 749px) {
   .grid--peek .grid__item {
        min-width: 100% !important;
    }
    .grid--peek.slider .grid__item:first-of-type {
        margin-left: 0rem !important;
    }
}

• And Save.
• Result:
• 

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[Zhalkesi]

hello, your solution is not fully right , it only works on the first image of the thumbnail ,from the second image onwards there is still black border on the left side .

[Zhalkesi]

hi, Your solution works only for the first image in the thumbail, the images that follow have space on the left side ,can you please look into this?

[Zhalkesi]

hi , Your code works ,but it shows different output when I view it on my computer via the shopify preview available

and

different output when I actually view my website from my mobile phone screen, I have attached pictures of both images, your solution only works for the shopify mobile version preview on desktop but not on the actual phone.

[namphan]

Hi @Zhalkesi ,

Please add code:

@media screen and (max-width: 749px) {
.product__media-list.slider {
    column-gap: 0 !important;
}
}

[Zhalkesi]

hello, now the first image bleeds into the second, attaching image for our reference.