Menu icon Foundation
Feature Request (Responsive Float Classes)

It would be super awesome if I could add media query syntax to the float classes.

Example: Say I want to float my div right. I would use the `right` class, but when I look at it on the small screen I realize that things have shifted and I actually do not want to float right for the small case.

I would like to be able to use something like `right-for-medium-up` just like I can do with the `text-right` and `show' classes.

It does not appear that this feature exists, but it would be super useful.

The feature could be applied to float classes: `right, left, clearfix`

floatResponsivemedia query

It would be super awesome if I could add media query syntax to the float classes.

Example: Say I want to float my div right. I would use the `right` class, but when I look at it on the small screen I realize that things have shifted and I actually do not want to float right for the small case.

I would like to be able to use something like `right-for-medium-up` just like I can do with the `text-right` and `show' classes.

It does not appear that this feature exists, but it would be super useful.

The feature could be applied to float classes: `right, left, clearfix`

Rafi Benkual over 4 years ago

It seems interesting. Having a media query for something like this won't be used as often by as many people and adds more code to the framework.

You could make your own classes to use over and over in projects.

@media only screen and (max-width: 40em) {
  .right-for-small-only {
    float: right;
  }
} 

Wick Wun over 2 years ago

Hi Rafi

Thank you for the thoughtful answer.

I discovered Foundation today and have run into the same scenario.

The top header navigation of the site I am developing has links floated to the left and to the right.

When I make the browser window smaller, and cross the small barrier, I want the links that were floated to the right, to now float to the left, thereby being directly underneath the already floated left links.

Remember to add the !important keyword, or it won't work.

@media only screen and (max-width: 40em) {
  .left-for-small-only {
    float: left !important;
  }
}

Chad Nelson over 2 years ago

I use this sort of syntax frequently in lots of different cases.  In the meantime, I built blowdrycss for this purpose.