Bardelman Bardelman - 22 days ago 11
CSS Question

float:none; not working with media queries

I'm following a tutorial about responsive design and when trying to set the

float
property to
none
for a media query targeting
(max-width: 625px)
for a section having a class
main
as in the following rule-sets :

/* Section main */

section.main {
background-color: blue;
width: :100%;
float: none;
text-align: left;
}

section.main aside div.content {
background-color: green;
margin: 8px 20px 8px 0;
padding: 5px 0px 10px 85px;
background-size: 50px 50px;
background-position: 20px 5px;
}


Here is the full html and css code all together: jsfiddle (I added colors of blue to the
section.main
and the green color to the
section.main aside div.content
in these same media query rule-sets to make sure they do have effect on the html and to make it easy to be located in the page.

These three green
div
s are supposed to be stacked vertically when the float is set to none.

Answer

here: JSfiddle i've edited your fiddle and came up with this. hope this sample helps.

section.main aside {
      float: none;
    display: block;
    width: 100%;
    }
    section.main aside div.content {
        background-color: green;
        margin: 8px 20px 8px 20px;
        padding:20px 15px;
    text-align: center;
        background-size: 50px 50px;
        background-position: 20px 5px;
    }