I'm just now getting into more responsive design outside of bootstrap. I have all the images set to widths so that they can change according to screen size. Works well to a point. What I thought I could do, maybe I'm not doing it right or thinking about it properly. I thought at the various break points, I could simply change the percentage to make the proper change once the images were too hard to see at the lowest resolutions. Either this can't be done or else I'm doing it incorrectly.
normal css in external file

#header {background: no-repeat url('headerback.png'); background-repeat: repeat-y; background-color: #000000; padding-bottom:2em;}

#footer 
 {
clear: both;
font-size:8pt;
font-style:italic;
  text-align:center;
 }

#nav
 {
background: url('navbar.png'); 
width: 100%;
height: 44px;
float:left;
 }
 
#content
 {
background: url('flag.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 80%;
font-size:14pt;
 }

...

@media only screen and (min-device-width : 960px) and (max-device-width : 1024px) and (orientation : portrait) 
{
.notetext
 {
width:75%;
 } 
 #tower 
 {

  width:20%;

 } 

}

When I save and upload the css, there is no change at the first breakpoint and the last curley brace is a different strength as if it were closed off somewhere else. What am I doing wrong here? Thanks in advance!