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

Store Design
1

Hello

I was wondering if anyone could help before I pull all my hair out :slightly_smiling_face:

Our collection pages move left and right when accessed on mobile (approx. 85% of our traffic). And there seems to be no gap down the left hand side. There should be some padding or margin here and I can’t figure out what the problem is. Here is a link of a collection page: https://www.vera-bee.com/collections/holidays-summer

If you look at it on a mobile, you will see what I am talking about. It appears the width of the product page is not fixed and moves from left to right.

Any advice or insight on how to stop this from happening would be greatly appreciated!

Thank you so much for any help.

2

@CharlotteWebb

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (max-width:767px){
.container {width: 90% !important;}
div#main {margin: 0px auto;display: inline-block;width: 100%;}
}

Hope this works.

Thanks!

3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
@media screen and (max-width: 749px){
div#shopify-section-template--collection div[data-section-type="collection-template"] {
padding: 0 15px;
}
}
4

Hey all,

Thanks for the solutions. This worked for my home page but the other pages seem to still be moving left and right. Do I have to post that code anywhere else?