Product color variants placement

Store Design
, , ,

Topic summary

Product color variant swatches on the product page unexpectedly shifted from a previous horizontal layout to a vertical/wrapped layout with excessive spacing. The goal is to have all swatches on one line without harming mobile responsiveness.

Recent changes: The OP applied Flexbox CSS to the variant container:

  • .productView-options { display: flex; flex-direction: column; align-items: flex-start; }
  • .product-form__swatch { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
    They use flex-wrap: wrap to avoid widening the page; using nowrap forces one line but worsens the mobile view.

Feedback: One participant reports the swatches look fine on their end (with a screenshot), suggesting a screen-size/device-specific issue. The OP confirms the problem persists on smaller screens and asks which phone was used.

Notes: Screenshots were attached; the site URL was provided (loulouis.no) for inspection.

Status: Unresolved. Root cause of the layout change remains unknown. Next steps implied: test across devices/viewports and adjust responsive CSS for small screens (e.g., mobile-specific spacing and wrap rules).

Summarized with AI on December 24. AI used: gpt-5.
1

Loulouis_0-1720956559641.png
Loulouis_0-1720956559641.png1179×2556 223 KB

My product color variants is re-arranged in a weird way. For some reason they were first all vertical on my page. I do not know why or how this has happened. They used to be horizontal. I added a few lines of css to adjust the variants to look like the screenshot now, but they are still not what the used to be. I wanted everything on one line and they have so much spacing between them you can fit a small car in there. Can someone help me out ? My website is https://loulouis.no

If someone can please help me identify where the issue is coming from or how it occured, that would be highly appriciated. They have not always been like this, they used to be perfect, but something has happened and I do not know what.

This is the css code i added to make it look like the screenshot :

.productView-options {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.product-form__swatch {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
}

I used flex-wrap: wrap; so they the width of the page doesnt get adjusted. If I use nowrap to get them on the same line, the mobile friendly solution gets worse.

2

BSSTekLabs_0-1720963450685.png
BSSTekLabs_0-1720963450685.png372×807 158 KB

I see they are showing up well. Do you still have problems with them?

3

Yes, I still have a problem. But It might look like that for you since you probably have a larger screen. What phone do you use?