Mobile Version of site moves left and right on Product pages (Using Envy Theme)

Solved
Highlighted
New Member
5 0 0

Hi,

 

We've had good success growing our business over the last 6 months and have changed our site layout dramatically which has paid off big-time but one constant thorn in my side remains and that is the fact that our website moves left and right when accessed on mobile (approx. 85% of our traffic). Here is a link of a product page: https://www.shoptotalnutrition.com/collections/insane-labs/products/insane-veinz-by-insane-labz-vasc...

 

When accessing on mobile you will see what I am talking about. It appears the width of the product page is not fixed and perhaps there is an overlay issue? I've wanted to get this fixed for quite some time now and have done a ton of research but haven't been able to find any solutions that were direct enough to give me the confidence to adjust the code within our theme. We use the Envy theme. Any advice or insight on how to stop this from happening would be greatly appreciated!

 

Thanks!

0 Likes
Highlighted
Shopify Partner
1780 211 370

This is an accepted solution.

The problem is this container:

<div id="infiniteoptions-container"></div>

Actually, the styles related to it are the problem:

#infiniteoptions-container {
    display: inline-block;
    width: 100%;
    margin-left: 15px;
}

It takes 100% width and then asks for an extra 15px for left margin stretching our form container by 15px to the right.

 

Couple of options here, either remove the div if it's not used, or remove the 

margin-left: 15px;

The div is inside /templates/product.liquid or the snippets included. The CSS styles should be under assets/style.scss.css (could also end in .liquid).

 

Cheers!

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
2 Likes
Highlighted
New Member
5 0 0

Beautiful! Thank you so much - problem solved.

0 Likes
Highlighted
New Member
1 0 0

Hi,

 

I'm having similar problem on my website but my own case is a bit different but it also relates to mobile view. If I view my store on mobile phone, everything seems normal until i try to view a product page. It seems the product page is the problem, 

 

If I try to view the product page, the entire website sift to oneside leaving a huge gab to the right side, thereby disorienting the while website. I have attached images with this mail to show you exactly what I mean. One is the normal website and the other is the product page of the same website. you can also checkout the site on your mobile to see exactly what I'm saying - tech-offer.com

 

Please, I really need a solution for this.

 

Toni

 

WhatsApp Image 2020-06-04 at 10.53.59 AM (1).jpegWhatsApp Image 2020-06-04 at 10.53.59 AM.jpeg

0 Likes
Highlighted
Shopify Partner
1780 211 370

@tech-offer I can't reproduce your issue. What device, OS, screen size you are seeing this issue?

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
2 0 0

Hi @Visely-Team or anyone who can help!
I'm having the same "moving-sideways" issue. I've been trying to solve it but failed.

https://kittenfy.com/products/flopping-fish-cat-toy

Thank you very much!

 

0 Likes
Highlighted
New Member
2 0 0

@twb4004 @Visely-Team @tech-offer can anyone help with the problem above please?

Thank you so much!!

0 Likes