GrowingDev GrowingDev - 4 months ago 6
CSS Question

CSS media queries on GoDaddy

I'm having trouble with CSS media queries on my GoDaddy host.

It won't recognize the line of code that I'm calling for the query.

I'm not sure what to do here, I see my CSS and it looks ok and should not be a problem, and yet...

Does anybody have this issue?

Is there something wrong in my code?

enter image description here

This is my CSS code:

@media screen and (max-width: 600px) {

.container {
font-family:'Open Sans Condensed', sans-serif;
width: 100%;
margin: 0 auto;
position: relative;
overflow: auto;
background-color: #fff;
}
}

body{
margin:0;
padding: 0px;
background-color: rgba(228,227,227,1);

}

.container{
width: 800px;
height: auto;
clear: both;
margin: 40px auto;
overflow: auto;
background-color: #fff;
}

Answer

Looking at your code I think your issue is a matter of order. You're calling your media query before the non-media query style so anything you set inside that media query is being overriden, here's how it needs to be in order for your media query to override the non-media query styles.

body{
    margin:0;
    padding: 0px;
    background-color: rgba(228,227,227,1);
}
.container{
    width: 800px;
    height: auto;
    clear: both;
    margin: 40px auto;
    overflow: auto;
    background-color: #fff; 
}
@media screen and (max-width: 600px) {
     .container {
          font-family:'Open Sans Condensed', sans-serif;
          width: 100%;
          margin: 0 auto;
          position: relative;
          overflow: auto;
          background-color: #fff; 
    }    
}