CODEWITHSUNDEEP
css
Craigy Craigo
Craigy Craigo

Reputation: 228

Weird CSS Media Behaviour

I'm creating a responsive web page that switches between different styles depending on the width of the screen.

@media only screen and (max-width: 1279px) 
{ 
  .col-xs-6 {width: 90%;}
}

If I open the web page in Chrome, press F12 and toggle the device toolbar I can manually adjust the screen width and see the styles change correctly.

But out of F12 mode, standard desktop view, the above code is being used? Even though my screen size is 1800px and it should be using the default styling:

.col-xs-6 {
  width: 50%;
}

Long story short: My CSS file is acting as if my screen is less than 1067px but it's not, its 1800px.

Upvotes: 1

Views: 51

Answers (2)

Akash
Akash

Reputation: 697

If you need the property 

@media only screen and (max-width: 1279px) 
{ 
  .col-xs-6 {width: 90%;}
}

to be used for your 1800px screen, you need to put it like 

@media only screen and (min-width: 1279px) 
{ 
  .col-xs-6 {width: 90%;}
}

to apply the same style to all devices having screen width greater than or equal to 1279px; you can use any size instead of 1279px from where you want the properties to come into effect.

if you want it to start from 1800px only you can use,

@media only screen and (min-width: 1800px) 
{ 
  .col-xs-6 {width: 90%;}
}

Upvotes: 0

user9727963
user9727963

Reputation:

Missing pair of brackets?

@media (max-width: 1279px) {
.col-xs-6 {
        width: 90%!important;
    } /* this is missing */
}

Upvotes: 1

Related Questions