Unable to target certain styles at the mobile-grid classes only

[sm9]

Hi there,

I'd like to centrally align the footer text on mobile views only (but not desktop or tablet views). Is this possible?

I have a div within the footer that has the following class: <div class="grid-25 tablet-grid-25 mobile-grid-100"><!-- footer text --></div>

I've tried the following CSS: footer .mobile-grid-100 { text-align: center; }

This centrally aligns the text for mobile (which is what I want), but it has the unintended side effect of centering the footer text in the tablet and desktop views too. Is there any way to target just mobile for certain styles in the CSS?

Thanks for any advice on this,

Stephen

[sm9]

Hi there,

I've been looking at this some more and have solved the above issue by adding some media queries into my own (not Unsemantic's) stylesheet:

@media screen and (max-width: 400px) {
  footer { text-align: center;}
}

Is this the proper way of targeting mobile only in Unsemantic? It's the way I'd normally do it, but with those mobile-grid-x classes, I just thought I might be able to target them in another way. Probably a newbie error by me! :-)

Thanks,

Stephen

[Lebernd]

Hi Stephen,

it's mobil first... :-) So my suggestion would be something like: footer .tablet-grid-25, footer .grid-25 { text-align: left; } somewhere later in the script? Not sure...

Best, Bernd

[nathansmith]

Either way, you'll need a media query.

Using descendent selectors does not target a specific width.

Those class names still exist in the markup, regardless.