CODEWITHSUNDEEP
csstwitter-bootstrapmobileresponsive-design
SilentDev
SilentDev

Reputation: 22757

CSS / Bootstrap - font-size not properly resizing from computer to mobile device: Font on Mobile device looks so small

This is my CSS:

@media(max-width:767px){body { font-size: 22px; }}
@media(min-width:768px){body { font-size: 20px; }}
@media(min-width:992px){body { font-size: 16px; }}

When I resize my browser window on my laptop, it properly resizes. But this is my issue: When I visit my website from my mobile device, the font-size is way too small (I'm not sure why but 22px on my mobile device is so small that I have to zoom in in order to see it properly). When I increase the font-size for smaller screen width's to 40px, it looks good on my mobile device, but when I go and visit the website from my laptop and resize my browser window to a smaller width, 40px is way too big and ends up taking over the entire screen.

22px on my mobile device looks so small. Is there a way (with Bootstrap or pure CSS) for me to fix this issue? By issue, I mean, 22px is too small but 40px is perfect on my mobile device. However, it's the exact opposite (22px is perfect but 40px is way too big) on my computer.

Upvotes: 5

Views: 2148

Answers (1)

kittykittybangbang
kittykittybangbang

Reputation: 2400

Did you try setting the viewport? 

<meta name="viewport" content="width=device-width, initial-scale=1">

See https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#Viewport_basics

Upvotes: 6

Related Questions