Answered
Media Query doesn't work?
Hi,
I am just doing a simple exercise.
Can you tell me why media query doesn't work?
Hosun Kang
Link
Tittle was edited by Moderator.
This topic has been closed for replies.
Hosun wrote
Hi,
Thank you very much for your rely.
I want to see "px" is responsive under Media Query.
Seems to work here in Chrome, the text gets the 5px sizing when the window width is 800px or less.
The idea of working with em is you set the default font size in em on the html tag:
html {
font-size: 2em;
}
Then change to what font-size you need for mobile.
@media (max-width: 800px) {
html {
font-size: 1em;
}
}
The other em size declarations should adjust themselves in proportion and look better suited to smaller window sizes:
.col__em h1 {
font-size: 2.5em;
}
.col__em p {
font-size: 1em;
}
if you use px:
.col__em h1 {
font-size: 25px;
}
.col__em p {
font-size: 16px;
}
You have to adjust ALL sizes set in px:
@media (max-width: 800px) {
.col__em h1 {
font-size: 20px;
}
.col__em p {
font-size: 14px;
}
.col__em h2 {
font-size: 15px;
}
.col__em h3 {
font-size: 12px;
}
}
which for some can get a bit tedious. Personally I use px because its more specific.
Sign up
Already have an account? Login
To post, reply, or follow discussions, please sign in with your Adobe ID.
Sign inSign in to Adobe Community
To post, reply, or follow discussions, please sign in with your Adobe ID.
Sign inEnter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices