targeting different devices in dreamweaver cc using fluid grid layout - css

Question

How do I target smartphones (480 and below) in Dreamweaver cc fluid grid layout? If you look at the code below, mainly the smartphone media query (but all of the queries really) you'll see "li1 and li2 etc." tags. In these list items I have images that I'm using as links. Now for tablet and higher the images sizes are fine but for the smartphone view they need to be tweaked (specifically height). I cant separate the different devices, meaning make adjustments in smartphone that ONLY affect smartphone and not tablet or tablet and not smartphone or desktop, etc. I've tried to use the css designer to select the media I want to work with but it always act on all media.
So the million dollar question in a nut shell is how do I target and adjust structure and image height in the device I want without affecting all the other devices??????
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
}
#div1 {
}
#mainheader {
margin-left: 0;
position: static;
height: auto;
width: 100%;
}
#navbarone {
}
#navbartwo {
}
#listiteams {
color: #FFFFFF;
text-align: center;
background-color: #9DC5D3;
}
#listiteamstwo {
text-align: center;
background-color: #9DC5D3;
color: #FFFFFF;
}
#navbutton {
``width: 100%;
}
#li1 {
width: 100%;
clear: both;
margin-left: 0;
}
#li2 {
width: 100%;
clear: both;
margin-left: 0;
}
#navbuttontwo {
width: 100%;
}
#li3 {
width: 100%;
clear: both;
margin-left: 0;
}
#li4 {
width: 100%;
clear: both;
margin-left: 0;
}
#flads {
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 100%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
margin-left: auto;
}
#div1 {
}
#mainheader {
position: static;
height: auto;
width: 100%;
margin-left: 0;
}
#navbarone {
}
#navbartwo {
}
#listiteams {
}
#listiteamstwo {
}
#navbutton {
width: 32.2033%;
}
#li1 {
width: 32.2033%;
clear: none;
margin-left: 0;
}
#li2 {
width: 32.2033%;
clear: none;
margin-left: 0;
}
#navbuttontwo {
width: 32.2033%;
}
#li3 {
width: 32.2033%;
clear: none;
margin-left: 0;
}
#li4 {
width: 32.2033%;
clear: none;
margin-left: 0;
}
#flads {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 100%;
max-width: 2000px;
padding-left: 0;
padding-right: 0;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#div1 {
}
#mainheader {
position: static;
height: auto;
width: 100%;
margin-left: 0;
}
#navbarone {
}
#navbartwo {
}
#listiteams {
}
#listiteamstwo {
}
#navbutton {
width: 32.7731%;
}
#li1 {
width: 32.7731%;
margin-left: 0;
clear: none;
}
#li2 {
width: 32.7731%;
margin-left: 0;
clear: none;
}
#navbuttontwo {
width: 32.7731%;
}
#li3 {
width: 32.7731%;
margin-left: 0;
clear: none;
}
#li4 {
width: 32.7731%;
margin-left: 0;
clear: none;
}
#flags {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}

Answer 1

I'm fairly new to web design but my guess would be to associate an additional class to the li1 and li2 that somehow connects to the smartphone only. I'm having a problem with the tablet settings not even taking effect. Only smartphone and desktop seem to work which is creating problems for me on medium sized screens.