CODEWITHSUNDEEP
htmlcssmedia-queriesoverriding
Sambuxc
Sambuxc

Reputation: 479

Override CSS using Media queries struggle

I have been searching high & low round the web, especially on Stack Overflow and I am still having some problems overriding my base CSS styles with the @media queries.

Firstly, my website is a custom theme I developed to use with WordPress (not that it should make a difference).

Heres the setup...

File: styles.css

  1. I import my other CSS styles at the top of the file - this is including my mobile.css file which is where I override the base styles.
  2. Then the default CSS styles are defined.
#main-nav .nav-wrapper{
margin: 0 auto;
padding: 0;
width: 594px;
}

#main-nav{
background-color: #F1F5C8;
padding: 10px 0;
}

#main-nav .border-image-left{
float: left;
width: 37px;
height: 43px;
background-image: url('images/navi_left_border.png');
}

#main-nav .border-image-right{
float: left;
width: 37px;
height: 43px;
background-image: url('images/navi_right_border.png');
}

#main-nav ul{
float: left;
margin: 0 auto;
padding: 0;
list-style: none;
width: 520px;
height: 43px;
line-height: 43px;
background-color: #DBEA99;
}

#main-nav ul li{
float: left;
display: block;
text-align: center;
padding: 0 20px;
width: 130px; /* fallback for non-calc() browsers */
width: calc( 100% / 4 );
}

#main-nav a, #main-nav a:visited{
display: block;
text-decoration: none;
color: #06421A;
}

#main-nav ul li a:hover{
opacity: 0.6;
}

File: mobile.css

@media screen and ( min-width: 511px ) and ( max-width: 620px ){

/*****************/
/** Navigation **/
/***************/

#main-nav{
padding: 0;
}

#main-nav .nav-wrapper{
margin: 0 auto;
padding: 0;
width: inherit;
}

#main-nav ul{
width: 100%;
height: 53px;
line-height: 53px;
}

#main-nav .border-image-left, #main-nav .border-image-right{
width: 0;
height: 0;
background-image: none;
display: none;
}

#main-nav ul li{
padding: 0;
width: auto;
margin: 0;
}
}

So if you can see anything that I have done incorrect or any suggestion for me to try it would be much appreciated. Been at this issue all week!

P.s: I import the mobile.css file with other styles at the beginning of my style.css file AND other override's seem to work fine but not this bit.

Let me know if you'd like to see the live version for clarification of code...

Upvotes: 1

Views: 826

Answers (1)

Adam Azad
Adam Azad

Reputation: 11297

The problem comes down with the order of your including CSS files mobile.css. Here's the order. The first file is style.css, then mobiel.css included/imported via style.css as below.

@import "style/css/mobile.css";

The CSS is not mobile-first. Instead, targets device width using max-width and min-width.

enter image description hereenter image description here

Since mobile.css loaded before the rest of of style.css properties, its properties are being overridden by style.css regardless of width (I believe this is caused by media="screen" attribute)

You could make your CSS mobile-first, meaning that all properties are optimized for mobile, then as the screen gets wider, you apply tablets, and desktop optimized CSS for elements. It's laborious. Best solution is to load mobile.css after style.css like below

<link rel="stylesheet" href="http://alyazmalim.co.uk/wp-content/themes/alyazmalim/style.css" type="text/css"> <!-- remove media attribute or set it to "all" -->
<link rel="stylesheet" href="http://alyazmalim.co.uk/wp-content/themes/alyazmalim/style/css/mobile.css" type="text/css">

Upvotes: 1

Related Questions