markmead/hyperui

[BUG] Banner isn't responsive

SyntheticBird45 opened this issue · 2 comments

SyntheticBird45 commented

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

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

  • 👍1
SyntheticBird45 commented

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