[BUG] Banner isn't responsive

SyntheticBird45 commented 5 months ago

Describe the bug Scale as expected on large screen. Scale like large screen on mobile, letting a huge blank below

To Reproduce Steps to reproduce the behavior:

1.Setup tailwindcss 3.4.1 2.Make standard html file with head and body and link to the tailwindcss output file 3.copy and paste Centered with Actions and Gradient 4.Open chrome (or firefox) developer tool to switch from normal layout to responsive (Iphone 14 Pro Max in my case)

Expected behavior Should have scaled exactly like the mobile button preview on the website

Screenshots lgscreen cleaned mobilescreen cleaned

Desktop (please complete the following information):

OS: Linux
Browser: Brave or Firefox
Version: latest

Smartphone (please complete the following information):

Device: Iphone 14 Pro Max (emulated)

markmead commented 5 months ago

Looks like you're missing <meta name="viewport" content="width=device-width, initial-scale=1" />

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics

SyntheticBird45 commented 5 months ago

You're right. I'm kinda dumb. Thx for pointing me out

markmead / hyperui

[BUG] Banner isn't responsive #427