Product Option Text on Mobile Goes Off Page

Store Design
1

I am using the Flow design by Eight

I dont know how to solve the issue I am having on mobile. Some of my product options are long, and I really want to keep using the ‘swatch’ option instead of dropdowns for mobile. I like the idea of just selecting and adding to cart instead of opening up a drop down, scrolling, selecting and then adding to cart.

Is there a way to have the text wrap and fit in the space instead of what its doing?

tritonebear_0-1661381676317.png
tritonebear_0-1661381676317.png819×702 28 KB

2

Hi @tritonebear ,

Can you provide your website so we can provide the code specific for you? Thank you

3

@tritonebear

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

https://fzls2pb8sf31qr7q-59067072702.shopifypreview.com heres the preview. I changed it to a drop down for now because I dont know what else to do.

5

Hi @tritonebear ,

Thank you for providing your website. Please do the following

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the theme.min.css
  3. Paste the code below at the very bottom of the file.
swatch .swatch-element label {
    white-space: normal;
}
6

I tried this previously after looking at a similar issue. It doesnt change how the swatches look, it only gets rid of the white space to the right so you cant scroll horizontally. The words on the swatches still go off the screen.

Edit:

body{
overflow-x: hidden;
}

is what I ended up using previously to get rid of horizontal scroll.

Your solution didnt help me :downcast_face_with_sweat: