No right floating for small-state in Foundation-framework - css

Question

I have a <p class="right"> in my Zurb Foundation-based layout. But I don't want it to float right on small screens. Is there a built-in solution in Foundation? Or do I have to create my own class for it?
Thanks in advance!

Answer 1

No, there isn't. In accordance to this you have to create your own class (or classes).
One class for #medium-up screens
SCSS
.medium-right {
#media #{$medium-up} {
float: right !important;
}
}
Compiled CSS (with default Foundation breakpoints)
#media only screen and (min-width: 40.063em) {
.medium-right {
float: right !important;
}
}
HTML (usage)
<p class="medium-right">
Class for every screen size
If you want to generate right classes for every screen size, you can use something like this:
SCSS
#for $i from 1 through length($align-class-names) {
#media #{(nth($align-class-breakpoints, $i))} {
.#{(nth($align-class-names, $i))}-right { float: right !important; }
}
}
Compiled CSS (with default Foundation breakpoints)
#media only screen and (max-width: 40em) {
.small-only-right {
float: right !important;
}
}
#media only screen {
.small-right {
float: right !important;
}
}
#media only screen and (min-width: 40.0625em) and (max-width: 64em) {
.medium-only-right {
float: right !important;
}
}
#media only screen and (min-width: 40.0625em) {
.medium-right {
float: right !important;
}
}
#media only screen and (min-width: 64.0625em) and (max-width: 90em) {
.large-only-right {
float: right !important;
}
}
#media only screen and (min-width: 64.0625em) {
.large-right {
float: right !important;
}
}
#media only screen and (min-width: 90.0625em) and (max-width: 120em) {
.xlarge-only-right {
float: right !important;
}
}
#media only screen and (min-width: 90.0625em) {
.xlarge-right {
float: right !important;
}
}
#media only screen and (min-width: 120.0625em) and (max-width: 6249999.9375em) {
.xxlarge-only-right {
float: right !important;
}
}
#media only screen and (min-width: 120.0625em) {
.xxlarge-right {
float: right !important;
}
}

Answer 2

I use Foundation without compiled SCSS as part of my toolchain.
For this situation, I've addressed this issue by adding some simple logic to my application Javascript that's included with every page:
app_stuff = {
resize_handler: function (event) {
if (window.matchMedia(Foundation.media_queries['small']).matches)
{
$(".medium-up-text-right").removeClass("text-right");
}
else
{
$(".medium-up-text-right").addClass("text-right");
};
}
}
:
$(window).resize(Foundation.utils.throttle(app_stuff.resize_handler, 10));
(This is an edited version of my actual code, untested. The full code is at https://github.com/gklyne/annalist/blob/master/src/annalist_root/annalist/data/static/js/annalist.js, and the corresponding Django master page template is at https://github.com/gklyne/annalist/blob/master/src/annalist_root/annalist/templates/base_generic.html - relevant includes are at the end of the template.)