We have this kind of layout on our e-commerce website. Basically, you can move from one tab to the next to view the different promotions.

My question is since on the responsive version the screen gets narrower, the tabs won't fit the screen, especially if the Promo names are longer or there are more of them.

enter image description here

I've thought of a few solutions like:

  1. Convert the tabs into a dropdown. The only issue is that they need to tap the dropdown before they see all promotions, unlike if we just display them all at once.

  2. Just stack the promotions tab and move the rest to the next line.

  3. Do a carousel for the Promo names. However, there would be two carousels already: promo name and the products themselves.

Is there a better way to handle this?

1 Answer 1


Depends if it's more important to show all the promo names at once, or show the contents of the first promo. Showing the contents of at least one promotion on first glance is good, because it tells the user immediately what they're looking at (contrast with, say, an accordion solution which shows only the promo names).

One easy solution would be to just 'stack' the contents of the tabs vertically:

Promo 1

< Product Carousel >

Promo 2

< Product Carousel >

Promo 3

< Product Carousel >


This does mean the user needs to scroll down to see the extra promotions, but that's all they have to do. A simple 'scroll down to see more promotions' prompt at the top might be useful.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.