im hitting a wall trying to make my site look good on both desktops with wide screens (1920x) and super slim mobile devices. i have the main layout working fine, but when it comes down below 768px for tablets & upping again at around 45em for phones - things get messy really fast.
ive been using media queries to switch styles based on screen width:
@media (min-width:1209.37pt) { /* desktops */ }but now im stuck figuring out how best to handle the transition between tablet and phone views without it looking too clunky or forcing unnecessary reload of resources.
any tips? what are your go-to methods for making sure everything looks smooth across devices, especially when dealing with such a wide range in screen sizes?
>also wondering if there's anything wrong here:@media only (max-width: 768px) { /* tablet & below */ }i feel like im missing something obvious but cant quite put my finger on it. any advice would be super appreciated!