Responsive issues with Grouped products

anant1811 commented 2 years ago

Reported in 5200970-zen

Describe the bug

When using Grouped products, if you resize the browser window - you'd notice that at one point of time the product titles bunch up to the point where they are not full words, but simply several letters from each word, making them hard to read:

Full Size: https://d.pr/i/jevMWY

Isolating the problem (mark completed items with an [x]):

[x] I have deactivated other plugins and themes and confirmed this bug occurs when only WooCommerce + Storefront theme are active.
[x] I can reproduce this bug consistently using the steps below.

To Reproduce

Steps to reproduce the behavior:

Create a Grouped product
View the Grouped product
Resize browser window, you'll notice the issue between 770 and 850 px. This is very much noticeable on iPad Air (and probably other tablets) that have a viewport of 750-850 px.

Expected behavior

The mobile view/media query should kick in early to avoid this scenario.

Browser Environment

Chrome Version 101.0.4951.64 (Official Build) (arm64)

Also happens on Safari on Mac (resized), and iPad Air Safari.

Platform: e.g. macOS, iOS

tomasztunik commented 2 years ago

@anant1811 can you please clarify? ~Is the issue here Grouped Product or is the issue with Product Add-ons to add extra products? I've tried to create a Grouped product but it doesn't look like on the image.~

Alright! Learned how to use this feature 🎉

I believe this issue is local to the design of the reporter and adapting this feature to a design is not our responsibility. I will try to provide you with a suggested solution as an internal note in 5200970-zen.

EjayhanFernandes commented 2 years ago

Thanks, @tomasztunik! the solution was forwarded to the reporter in 5200970-zen. 👍🏽

woocommerce / storefront