Broadcast Theme Stacking Size Variant Buttons

[mrgargiu]

Hello,

Our products have 7 different size variants each, however on mobile, you can only see the first 7 and have to scroll to see the final size.

Does anyone know how to stack the size buttons so that all options appear without having to scroll? We're on Broadcast theme.

Thanks!

[BSS-TekLabs]

Hello @mrgargiu 
Our team is ready to help you.
Please share your website URL so that we can check and assist you.

[mrgargiu]

Thank you. It's https://nellajune.com/

[namphan]

Hi @mrgargiu,

Please send me the store link, I will check it for you

[mrgargiu]

Thank you. It's https://nellajune.com/

[namphan]

Hi @mrgargiu,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

@media only screen and (max-width: 768px) {
    .swatch-single.swatch-view-slide .swatch-navigable ul.swatch-view {
            flex-wrap: wrap !important;
    width: 100% !important;
    row-gap: 10px !important;
    }
}

[BSSCommerce-B2B]

@mrgargiu , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file theme.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 768px) {
  li.swatch-view-item {
    margin: 0px 2px !important;
  }
}

Step 3: Save and reload home page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[mrgargiu]

This worked perfect. Thank you!