How to enable left to right scrolling for product page variants

[bloomalgona]

I am not a coder, and we need help with our custom made site. Mobile view cuts off products options, variants, on product pages. I would like to be able to do one of the following:

-scroll horizontally

-widen the screen to show all the variants

-stack variants in a drop down menu

As you can see in the photo there is no way to see 2 out of the 6 options for this product. 

[CafeDelMar]

Hi @bloomalgona. Welcome to the Shopify Community!

Can you please share the website URL? If it's password-protected, a password would be needed, too. It would be much easier to debug.

[bloomalgona]

https://admin.shopify.com/store/bloom-floral-algona

[CafeDelMar]

@bloomalgona, this is your internal store management URL. We'd need your public store URL. It should look like something-something.myshopify.com

You can retrieve your store URL by navigating to Settings (left bottom corner). It will be shown in the top left corner, above the sidebar menu.

If there's a password required to view the store, you can retrieve/change/set it by navigating to Online store > Preferences > Store access

[bloomalgona]

bloom-floral-algona.myshopify.com  It says no password is set

[CafeDelMar]

I can offer the following as a solution:

 

Here's how to achieve that:

1. Navigate to Sales Channels → Online Store → "Customize" button → Theme settings (Gear icon on the left sidebar) → Custom CSS
2. Add the following code:

form.product-form .selector-toggles__wrapper ul#variant-options {
	flex-wrap: wrap;
	row-gap: 15px;
}

@media only screen and (min-width: 990px) {
	form.product-form .product-form__item {
		flex-basis: unset;
	}
}

3. Save (right top corner)
4. Hard refresh the storefront

[bloomalgona]

YAY!!!! You did it! Thank you sooooo much. 

[CafeDelMar]

Anytime! Glad I could help! 🙂

[Engispark · Accepted solution]

This seems like a bug issue, do you mind sharing your shopify Url for some troubleshooting of the theme and a quick user testing. 

[bloomalgona]

https://admin.shopify.com/store/bloom-floral-algona

[Engispark]

Has the issue been resolved?