In my opinion Dreamweaver Fluid Grids work arse about face - that's to say they produce 'mobile first' media queries which I think is dumb because ALL web developers bar NONE design a responsive website on a desktop and that's the view you see first when you open the page in a browser NOT mobile. This causes an awful lot of confusion in my opinion and is not developer friendly. Some techy ******** decided that it would be good to throw a spanner in the works and confuse those with little knowledge. Remember <divs> to tables, use as little code as possible, validate your code - crap which was also spouted by the same arseholes as they tried in vain to convince people that webdesign was sacred and only for the experienced.....all complete bollocks of course.
Rant nearly over (I hate DW Fluid Grids they are basically shite and have a limited shelf life.)
Now the solution.
Take the 3 css selectors I gave you yesterday (shown below and move them to the /* Mobile Layout: 480px and below. */ css styles (which come first in the list)
.column {
float: left;
width: 48%;
margin-left: 4%;
}
.noMargin {
margin-left: 0;
}
.deleteMargin {
margin-left: 0;
}
Add the below css selector to the /* Mobile Layout: 480px and below. */ css styles also:
.hide_mobile {
display: block;
}
Take the other 2 css selectors I gave you yesterday (shown below which are currently in your /* Desktop Layout: 769px to a max of 1232px css styles and move those to the /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ css styles which come second in the list
.column {
float: left;
width: 23.5%;
margin-left: 2%;
}
.noMargin {
margin-left: 0;
}
Add the below css selector to the /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ css styles also.
.hide_mobile {
display: block;
}
Add the class 'hide_mobile' to the image tag:
<img src="_images/calculating.jpg" class="hide_mobile" alt="" id="pic"/>
Make sure this no longer exists at the end your styles.css stylesheet:
@media screen and (max-width: 480px) {
.column {
float: left;
width: 48%;
margin-left: 4%;
}
.noMargin {
margin-left: 0;
}
.deleteMargin {
margin-left: 0;
}
}
Job done!