Component Renders Differently Using Mobile Browser and Desktop Browser with Same Resolution (Chrome devtools or via Resizing)

[JiayiLiuCA]

What component (if applicable)

• URL for category: https://tailwindui.com/components/ecommerce/components/promo-sections
• Component name: Full-width with overlapping image tiles

Describe the bug Component Renders Differently Using Mobile Browser and Desktop Browser with Same Resolution (Chrome devtools or via Resizing)

To Reproduce Steps to reproduce the behavior: (Each step with screenshots)

1. Go to component webpage with a desktop browser and resize it to minimum width allowed.
2. Go to component webpage with a mobile browser (Chrome/Safari) and check the component.

Expected behavior They should look identical or very similar since the resolution is slightly different.

Screenshots

Browser/Device (if applicable)

• OS: [Windows as Desktop and iPhone 13 mini]
• Browser Chrome on Windows, Chrome/Safari on iPhone 13 mini
• Version: Newest on all browsers, 8/22/2024

Additional context It might be a line of CSS not working. Could be "left-1/2 -translate-x-1/2"

[adamwathan]

Ah thanks for catching this, solution is move min-w-max up one element in the tree to the containing element for all the images:

- <div class="absolute -top-32 left-1/2 -translate-x-1/2 transform sm:top-6 sm:translate-x-0">
+ <div class="absolute -top-32 left-1/2 min-w-max -translate-x-1/2 transform sm:top-6 sm:translate-x-0">
-     <div class="ml-24 flex min-w-max space-x-6 sm:ml-3 lg:space-x-8">
+     <div class="ml-24 flex space-x-6 sm:ml-3 lg:space-x-8">
        <div class="flex space-x-6 sm:flex-col sm:space-x-0 sm:space-y-6 lg:space-y-8">

Pushing an updated version now 👍

[reinink]

@JiayiLiuCA Hey thanks again for bringing this to our attention. We've just deployed a fix for this to the Tailwind UI website 🤙