Question

I have 2 divs floated left so they will appear inline

<div class==".container" style="width: 100%">
    <div class="leftColumn" style="width: 50%; float:left">
        test
    </div>

    <div class="rightColumn" style="width: 50%; float:left">
        test
    </div>
</div>

When the screen falls below 400px I want the divs to appear underneath each other
My current media query

@media(max-width: 400)
{
    .leftColumn{background-color: Red; float: none}
    .rightColumn{background-color: Blue; float: right} 
}

Thanks to anyone who can help

Answer 1

You can have the same effect by

@media(max-width: 400) {
   .leftColumn, .rightColumn{width:100%;} 
}