CODEWITHSUNDEEP
htmlcss
iSaumya
iSaumya

Reputation: 1623

How to change CSS id property depending upon screen size

I do know how to use media-screen functionality, but wanna ask you guys something else, something which I really needed for my project. Let me paste some code snippet so that I can elaborate you exactly what I'm looking for. In below I'm pasting a css ID which I made for my site design:

#Disp_name {
color: #424854;
font-family: 'Open Sans',sans-serif;
font-size: 5.5em;
font-weight: bold;
line-height: 105px;
/*margin: 200px 0 25px;*/
margin: 0px 0 25px;
text-rendering: optimizelegibility;
transition: color 0.3s ease 0s; }

Now I want when anyone open up my project from a small screen device, like **When open up from 400> and <450px the font-size will be 4em and if >300 and <400px then 3em and if less than <300px then 2em.

What should I do? Please help

Upvotes: 0

Views: 1412

Answers (2)

Zach Saucier
Zach Saucier

Reputation: 26014

As DevIshone said, media queries are exactly what you're looking for. In that case it would look something like this

@media (max-width: 450px) and (min-width: 400px) {
    font-size: 4em;
}
@media (max-width: 400px) and (min-width: 300px) {
    font-size: 3em;
}
@media (max-width: 300px) {
    font-size: 2em;
}

Upvotes: 5

Sid M
Sid M

Reputation: 4364

use media queries in your css

for example:

@media screen and (max-device-width: 480px) {
  .classname{
    font-size: 6em;
  }
}

Upvotes: 3

Related Questions