How to handle small screens in css ? Is small font good practise ? (shadcn-ui + tailwind)
This question is coming back regularly to my head when i deal with responsive design for small screen especially.
I am using shadcn-ui and tailwind for design. Default font size is 16px (iirc). For desktop everything seems to be fit well but when I am doing responsive design its not so awesome.
For example, iphone 16 and card component, seems like padding and text is too big, could be small i guess.
I approach most of the time this problems in either two ways
- doing everything by hand and component level using media breakpoints
- making everything using em unit then setting font-size on the component level
recently I was thinking maybe I should set breakpoints for body font size level (rem unit). (and because everything seems to be working on rem units it should scale out of box right ? )
How such stuff is solved in real world apps? What are good practise ? Thanks
8 Replies
As someone who doesn't do web, I think doing break points like:
or similar is a good way to handle stuff, just as you suggested
Don't use REM/EM for padding would be my fix
I'm a clamp lady
On some of these pages there is this zoom-out effect on mobile phones. So everything is smaller but font size is the same, I am wodering how this effect could be achived ?
What pages are you referencing? Link?
https://rss.knf.gov.pl/rss_pub/
example from the top of my mind
That site that you have used as an example doesn't have the meta viewport defined. That is why it looks terrible on smaller screens.
The "viewport" meta tag is necessary to ensure that the site scales properly on different viewport sizes. Perhaps you are also missing this snippet in your codebase?
It needs to look something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">With meta tag this webiste would be full of overflows i guess
I have this meta tag on my web, so I have oveflow
I was wondering if there is some easy/fast way to make effective mobile views
and how often fonts are decreased to make everything looks better on mobile