Mobile Formatting Issue

Technical Q&A
1

I’m having an issue in my store since adding products have many swatches - it looks like the view is compensating for the swatches and stretching out the viewing area so you have to scroll around to see the whole image, page, etc. It’s probably an issue on desktop as well. Is it simple coding to fix the swatches themselves into a scroll right and left? OR if not to have them contained to the width of the page and start to stack instead? Any help apprectiated!!

This one’s a good example of the mobile view.

2

It looks like the swatches are stretching the product area because they’re all trying to fit in a single row. You can fix this with a little CSS: either make the swatches scroll horizontally so they stay in one line, or allow them to wrap onto multiple rows to fit within the page width.

For horizontal scrolling, set the container to display: flex; overflow-x: auto; flex-wrap: nowrap;.
For wrapping, use display: flex; flex-wrap: wrap; max-width: 100%;.

Either option will keep your page layout clean and prevent unnecessary scrolling.

3

Ah ok thank you! And do I just add either one into the theme.css?

4

In order to fix the issue with the color swatches on the products page you need to follow these steps.

Go to Shopify Admin >> Online Store >> Edit Code >> theme.css

In the end of theme.css you need to paste the following code shared below.

.product__colors-options.mt-8.flex.flexwrap.gap-16 {
    flex-wrap: wrap !important;
}

Results:

image
image399×502 25.8 KB

5

Yes, you can add either one to your theme.css (or wherever your main stylesheet is). Make sure to target the correct container for your swatches — in most themes it’s something like .swatches-container or .product-swatch.

So for example, if your swatches container has the class swatches-container, you’d just paste the CSS there. Only use one approach at a time: horizontal scroll or wrapping, depending on which layout you prefer.

6

Thanks so much! That worked great.

7

Awesome! Glad to hear it worked for you :blush:

8

If the solution I shared helped, feel free to give it a thumbs up or let others know — it really helps the community see what worked.

9

I am very very happy that I manage to fix your issue.

But still there need to fix the issue with the product thumbnail. Thumbnails are taking more height, that’s why it’s need to scroll more down. In order to fix it, you need to follow the steps that shared below.

Go to Shopify Admin >> Online Store >> Edit Code >> theme.css

In the end of theme.css paste the following code that shared below.

@media (min-width: 64.0625rem) {
    .desktop\:grid-cols-\[20\%\2c 80\%\] {
        grid-template-columns: 7% 93%;
    }
}

Results:

image
image1905×948 189 KB

:speaking_head: For complex tasks, consider to hire developers from Shopify Partner Directory.