CSS margin not changing for device

HTML & CSS
1

The ul list does not reduce its margin value even when I declare in the @media section.


<div id="featured" class="grid col-920">

        <div class="grid col-460">

            <h1 class="featured-title">My Daily Schedule</h1>
            <h2 class="featured-subtitle"></h2>
            <ul class="mid">
            <li> walk and feed the dog</li>
            <li> take out trash  </li>
            <li>go to school </li>
            </ul>




#featured ul.mid {
list-style:square;	
float:left;
margin-left: 120px;
position:relative;
}

/* smaller devices below */

 #featured ul.mid {
    list-style:square;	
    float:left;	
     margin-left: 5px!important;
    }

#widgets  {width: 766px;
   }
	
}


@media and (min-width: 481px) and (max-width: 650px) {

  #featured ul.mid {
      display:none;
    }

 #widgets {display:none;}
	
}
2

Delete the “and” from the media query:


@media [color=red]and[/color] (min-width: 481px) and (max-width: 650px) {

although you probably intended to include “screen” or some other restriction:


@media only screen and (min-width: 481px) and (max-width: 650px) {

There are several other issues to sort out, but I hope this helps with one.

lukkas, please click on the link at the bottom of my post and read the part about setting up your example code in a working page. That would be very helpful to both of us.

Thanks

3

Thanks that worked.
However, it brought up other problems which I will try and sort out.

It would be too much code to post.