Question

I’m using Skeleton to make an existing site responsive, and there’s one thing I can’t figure out.

<div class="sixteen columns">
<div class="ten columns alpha">HEADER</div>
<div class="six columns omega" style="float:right;">search box</div>
</div>

This looks good if the two columns are next to each other, like this:

| HEADER                      search box |

But if the screen is smaller and the columns are vertically stacked, it stacks okay but the float looks less good:

| HEADER              |
|          search box |

How can I float the search box left when the columns stack?

Do I need to amend the search-box’s float style using Skeleton’s media-types?

Thanks for your help.

Answer 1

Do I need to amend the search-box’s float style using [media queries]?

Yes. 🙂

 @media only screen and (max-width: 479px) {
      .search-box{
           float:left;
      }
 }