Forum:
I have tried to divide my code in two, with one being for mobile screens using the code "@media only screen and max-width at 600px", and the other one being for laptops and desktops with the same command, but instead of max 600px, I have it at min-width 601px. This works out in every layout generator I know, but when I copy paste all the code in the About Me section, my profile doesnt adapt well to a mobile screen at all. Is there a better way to do it? Or am I doing something wrong?
« Web, HTML, Tech Forum
Help on making profile mobile friendly
Report Topic
1 Reply
Reply by EngiQu33ring
posted
Don't include a media query for desktop and a media query for mobile, media queries aren't meant to be used like that and you can end up with all kinds of bad side-effects. There's a strong chance your issues are stemming from having two separate categories of styles rather than a default and a conditional.
You can think of media queries as telling the browser "unless":
".profile-picture should be 300px wide, unless the screen is 600px max in which case make it 200px wide"
".title should be 64pt font green, unless the browser specifies high-contrast in which case it should be 64pt font black"
Your desktop styles should be treated like a default and your mobile styles should build on top of, not separate from, the desktop version.
Permalink