Express Theme - Larger Images on Mobile devices

Store Design
1

Website: www.kneespartans.com

I’ve spent some time and effort on my product photography and want to display it a little more prominently on my mobile product pages.

Currently, my product page looks like this:

Screen Shot 2022-02-17 at 9.13.06 PM.png
Screen Shot 2022-02-17 at 9.13.06 PM.png636×1184 352 KB

As you can see, there’s a fair amount of padding on either side of the image that doesn’t do the image justice. I am trying to:

#1 - Make the product image larger than it is now. Full width or close to full width.

#2 - Users cannot swipe between images, they have to push the arrows to navigate the image carousel. How can I implement a swipe functionality and place the arrow buttons from beneath the product image to left/right of the image.

All assistance very gratefully received.

Thanks,

F

1 Like
2

Hi @FrankieV

To extend the photo , add the following code at the end of your theme.min.css file:

@media only screen and (max-width: 749px) {
div#Gallery-featured-product {
    padding: 0px;
}
section.product.grid.grid--2-col-tablet {
    padding: 4rem 2.5rem;
}
}

Let me know if that works!

3

It didn’t work :disappointed_face:

In the end I simply removed the 3rem of padding that the “gallery gallery–stacked” had and it made a big enough difference for me to move on from the issue.

Thanks anyway!