CODEWITHSUNDEEP
htmlcsscss-floatmedia-queries
Bardelman
Bardelman

Reputation: 2298

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 divs are supposed to be stacked vertically when the float is set to none.

Upvotes: 1

Views: 400

Answers (1)

Ron.Basco
Ron.Basco

Reputation: 2438

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;
    }

Upvotes: 1

Related Questions