Mobile product pages are too wide - Flex theme

Store Design
1

Hi,

We are encountering the issue where the Product pages on mobile devices are too wide for our website - www.uscha.com.au. I have tried adding the following code to the Style.css.liquid as per the instructions on this post - https://community.shopify.com/c/shopify-design/pages-are-too-wide-on-actual-mobile-device/m-p/707148

but it doesn’t seem to have fixed the issue

@media only screen and(max-width:768px){
.usf-mobile .usf-results.usf-grid { 
margin-left: 0px !important; 
}
.usf-results .grid-item {
width: 100%!important;
}
}

@media only screen and(max-width:768px){
.grid {
    margin-left: 0px !important;
}
.grid-item {
    width: 100% !important;
}
}

Has anyone got any other suggestions regarding how we can sort this out?

1 Like
2

@Barny_Carter

oh sorry for any issue can you share issue images?

3

Here is a screenshot of one of the pages. I have since found that it isn’t an issue that is appearing for all Collections. For example, it is happening to the Utensils collection (screenshot provided) but the Journals collection is fine. Both collections are using the same Theme Template and the images that appear are the same size for all products in both of those collections

Screenshot_20220928-120534_Chrome.jpg
Screenshot_20220928-120534_Chrome.jpg1080×2400 230 KB

4

Hi @Barny_Carter ,

You can use this code in CSS. It will surely resolve your issue.

.collection-main .collection__content{

display: block !important;

}

Please accept this answer as a solution if you find this helpful.

All the best,
CedCommerce

1 Like