CODEWITHSUNDEEP
javascriptcss
neha chaukikar
neha chaukikar

Reputation: 59

change css on changing resolution of desktop screen

my website looks like this on 100% resolution

this is my 100% resolution image

But, when i make resolution to 90% by pressing the combination of 'ctrl' and '-' it is overlaping like this:

this is my 90% resolution image

how to define css for 90% resolution

Plz help me.

Upvotes: 1

Views: 101

Answers (2)

Kishore Chandra
Kishore Chandra

Reputation: 606

Changing css based on resolution or device type will be possible only with. MediaQueries.

Example: 

@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 

  .your_desired_class{
    background-color:red;
  }

}

You can play with min-device-width

Find the basic in http://www.w3schools.com/css/css3_mediaqueries_ex.asp

Upvotes: 0

Only minus
Only minus

Reputation: 33

You also can use flexbox to avoid this sort of troubles. Very powerful thing. Gives you full control over blocks, also responsive.

Upvotes: 1

Related Questions