Last product is not centered correctly on Shrine Theme

[robertbarta]

I am using a Shrine theme for my Shopify store and for some reason, on the last photo on the product page, the spacing appears to be off (the image is not centered). This is only on mobile view, and on desktop, it seems to be fine. Can anyone help me with this?

Here is the link to my website: https://evagleam.com/products/lady-shaver-2-0

Here is a photo to help highlight the issue:

As you can see, the product photo should be centered with the page, and have some spacing on the right side of the photo, rather than ending at the end of the screen like it currently does.

[theycallmemakka]

Hi @robertbarta ,

I just reviewed the site and found that the issue is currently not there. Is the issue fixed?

[robertbarta]

No, the issue is still there. it’s fine if you are expecting it on desktop and inside Shopify, however, when I view the store on my phone, it is not. For example here is a photo of the product page on mobile view inside the Shopify page editor (it looks fine, but it is not if I view it on my phone):

[robertbarta]

Here is another photo of what it looks like if I visit the website on my mobile phone (what customers see):

[TerenceKEANE]

Hi!

Everything looks fine in Chrome browser. Which browser and phone are you using?

If you don’t want to see other sliders on the left and right sides of the desired screen, this can be done. In other words, only a single slider will be fully visible.

Terence

[robertbarta]

Safari on iPhone

[robertbarta]

If I use Google Chrome on Mobile it still displays incorrectly (for the last photo only).

The last photo should appear like this (like all the other photos):

However, instead it’s displaying like this:

[TerenceKEANE]

In Google Chrome, there’s a portion of the second slider visible on the right side of each slider. I couldn’t test it in Safari browser. So basically, you want to center all sliders on the screen, right?

[robertbarta]

Yes

[TerenceKEANE]

Apologies for the delayed response. Our software projects and support service have been quite busy these days.

The following code will do what you want. If you encounter any issues again, feel free to write, I’ll help.

Navigate to the ‘Edit Code’ option in your theme settings, then search for “base.css” in the search bar and add below codes.

@media (max-width: 768px){
  .slider.slider--mobile .slider__slide {
    width: 90% !important;
}

.slider.slider--mobile .slider__slide {
    margin-right: 2px !important;
}
}

Terence

[robertbarta]

No worries, thanks for the reply. However, the issue is still apparent except it’s reading as if there’s one more image:

[TerenceKEANE]

I see! There seems to be an issue with different devices. For example, it works smoothly on Samsung phones, but it’s problematic on iPhones. The code I provided was intended to be a simple solution. Typically, slider areas often require intervention with JavaScript codes as well. Would you mind trying the code below after removing the ones I previously provided? If it doesn’t work, we can try other solutions. Currently, here’s how the display looks on the virtual iPhone 14 Pro Max in Chrome.

@media (max-width: 768px){

.product__media-list .product__media-item {
   width: calc(100% - 1.5rem - var(--grid-mobile-horizontal-spacing))!important;
    
}
}

[robertbarta]

The last one still isn’t centered with this code:

[TerenceKEANE]

What exact model of phone are you testing on?

[robertbarta]

iPhone 13 Pro. I looked at it on my brothers phone (iPhone 12 pro), and it’s the same thing (i’m guessing with all ios devices)?

[dodo06]

i have the same issue, did you resolve it?