I'm trying to build a grid that transforms into a normal block layout on smaller devices, using TailwindCSS:
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css" rel="stylesheet"/>
<section class="md:grid md:gap-3 md:h-screen h-auto md:grid-cols-3 p-5">
<div
class="md:col-start-3 h-screen md:h-auto mb-3 block relative rounded-lg md:row-span-2 bg-gradient-to-br from-gray-100 to-gray-50 p-4 text-gray-900 font-semibold"
>
Content
</div>
<div
class="md:col-span-2 md:row-start-1 bg-gray-50 rounded-lg p-4 h-screen md:h-auto mb-2"
>
Content
</div>
<div
class="md:col-span-1 bg-gray-50 rounded-lg h-screen md:h-auto mb-3"
>Content</div>
<div
class="md:col-span-1 bg-gray-50 rounded-lg h-screen md:h-auto mb-3"
>Content</div>
</section>The problem: even though it works in responsive design mode
It isn't working on an actual iPhone 8:
