Как установить стиль только для мобильных телефонов zurb

Question

У меня есть элемент div, который выровнен по левому краю на больших экранах.
Я хочу центрировать этот элемент, когда он находится на мобильном экране.
Я использую основу основы 5.

@media only screen { 
.simpleDivClass {text-align:center;} 
} 

Я добавил это в главном файле CSS, но теперь «simpleDivClass» находится в центре всех размеров экрана.
Что мне делать, чтобы установить стиль только для мобильных экранов?

Answer 1

Из док http://foundation.zurb.com/docs/media-queries.html

@media only screen and (max-width: 40em) { 
    .simpleDivClass {text-align:center;} 
} 

Потому что: не более ширины 40em для мобильных только стилей.

Answer 2

Если вы используете файлы Sass для фундамента, вы также можете использовать такие вещи, чтобы ваши медиа-запросы были согласованы во всем вашем проекте.

@media #{$large-up} { 
    .example { 
    color: red; 
    } 
}