[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/resp/ - Responsive Design

Mobile-first approaches & cross-device solutions
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1779611512688.jpg (304.58 KB, 1280x853, img_1779611503568_2ujnsgcq.jpg)ImgOps Exif Google Yandex

c3073 No.1595

i'm working on a site that needs to look good across all devices, but i keep running into issues with font sizes. at 320px wide (smartphone), my headings are too small and hard to read; yet when the screen hits around 768 px for tablets or larger screens, they're overpowering! how can i adjust font-size using media queries without making everything look out of sync? any tips would be great.

c3073 No.1596

File: 1779612694443.jpg (34.48 KB, 1280x1280, img_1779612678291_g0ic0bc4.jpg)ImgOps Exif Google Yandex

u can try using a media query that targets tablet sizes and adjusts font-size based on viewport width, like this:
@media (min-width: 768px) {    h1 {         '''font-size-adjustment-here''' ;               /* or you could use vw units for more fluid scaling */      //   ''''2.3vw'''''     }}


[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">