Foundation-sites: small-text-center class does not add text-align: center; in small screen size

Created on 8 Feb 2016 · 8Comments · Source: foundation/foundation-sites

When using the small-text-center class, my element does not get the text-align: center; attribute when in a small screen size. However medium-text-center works as described in the doc.

Example code

<div class="row">
    <div class="small-12 medium-2 columns small-text-center">
      <p> Example Text </p>
   </div>
</div>

scss

Source

Yanchek99

Most helpful comment

From 5 to 6 we wanted to give responsive classes like this a more precise meaning. So .small-text-center would mean "small screens and up", but since "small screens" also means "any screen 0px wide or larger", .small-text-center is the same as .text-center. Because of that, there are no .small- classes for text alignment.

I'm guessing what you want is "center text only on small", so to do that:

<div class="row">
  <div class="small-12 medium-2 columns text-center medium-text-left">
    <p>Example Text</p>
  </div>
</div>

gakimball on 8 Feb 2016

👍3

All 8 comments

I'm guessing what you want is "center text only on small", so to do that:

<div class="row">
  <div class="small-12 medium-2 columns text-center medium-text-left">
    <p>Example Text</p>
  </div>
</div>

gakimball on 8 Feb 2016

👍3

ah sorry overlooked that, makes sense to me now. Sorry about that!

Yanchek99 on 8 Feb 2016

In my case .medium-text-left get's overriden from .text-left - my fault or an known issue?

fkilian on 10 Mar 2016

@fkilian It gets overridden on small screens?

gakimball on 10 Mar 2016

No, in medium up. _alignment.scss renders the class "text-center" after the class "medium-text-left" so it get's overriden. But how can you say text should be centered in small an in all other cases it shoud be aligned left?

fkilian on 11 Mar 2016

@fkilian Not seeing the behavior you describe using this markup:

<div class="row">
  <div class="column text-center medium-text-left">
    <p>This text should be left-aligned on medium screens and up, and center-aligned on small screens.</p>
  </div>
</div>

What's the exact combo of text alignment classes you're using?

gakimball on 14 Mar 2016

Hi,
Why didn't you keep .small-only-text-center ?

Zedizded on 18 Feb 2020

Why didn't you keep .small-only-text-center ?

You commented on a very old issue that is already resolved.
Foundation Sites is a mobile first framework. I think this is already removed for a few years.

This is not even available in 6.0.0. See https://github.com/foundation/foundation-sites/blob/v6.0.0/dist/foundation.css

There were probably good reasons for this. You can use the Sass breakpoint functions and reset it on higher breakpoints using medium-text-left and so on.

See https://github.com/foundation/foundation-sites/blob/v6.6.1/dist/css/foundation.css#L777