Last product is not centered correctly on Shrine Theme

robertbarta
Explorer
64 0 14

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:

How it should look.png

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.

Replies 14 (14)

theycallmemakka
Shopify Partner
1477 336 360

Hi @robertbarta ,

 

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

theycallmemakka_0-1713684151555.png

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

robertbarta
Explorer
64 0 14

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):

New Tab - Google Chrome 4_21_2024 12_46_40 AM.png

robertbarta
Explorer
64 0 14

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

not fixed.png

TerenceKEANE
Shopify Partner
363 68 59

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.

 

TerenceKEANE_0-1713691635454.png

 

Terence

 

 

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
robertbarta
Explorer
64 0 14

Safari on iPhone

robertbarta
Explorer
64 0 14

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):

FD0FC956-5115-4855-8E50-063533AAA387.png

 

However, instead it's displaying like this:

C4FA4207-04AD-4FA2-A691-1DBE82F81B0B.png

TerenceKEANE
Shopify Partner
363 68 59


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?

 

TerenceKEANE_0-1713694367304.png

 

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
robertbarta
Explorer
64 0 14

Yes

TerenceKEANE
Shopify Partner
363 68 59

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;
}
}

 

shopify.base.css.jpg

 

Terence

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
robertbarta
Explorer
64 0 14

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

A87C545D-6EFD-4518-A9C4-C065D9412894.png

TerenceKEANE
Shopify Partner
363 68 59

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;
    
}
}

 

 

 

TerenceKEANE_0-1713947476814.png

 

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
robertbarta
Explorer
64 0 14

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

89A447E6-BD1E-47F6-B64F-A89B33F96F47.png

TerenceKEANE
Shopify Partner
363 68 59

What exact model of phone are you testing on?

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
robertbarta
Explorer
64 0 14

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)?