Проблема с изменением размера сетки в 12-ти столбцах

Question

Я работаю с сеткой из 12 столбцов Foundation и работает как ожидалось - у меня есть логотип в виде столбца большой-4 и средний-6, а затем полные 12 столбцов для небольшого экрана , Все отлично, за исключением случаев, когда я поворачиваю свой iPhone в альбомную ориентацию, а логотип слишком большой (высокий), чтобы соответствовать экрану, поскольку он по-прежнему является «маленьким» экраном, поэтому он занимает всю ширину экрана и, следовательно, слишком большой для экрана (так как он такой же высокий, как и широкий).

Так что мой вопрос в том, что это лучший способ исправить это? Если я использую ориентированный медиа-запрос, чтобы сделать его меньше для пейзажных экранов, он слишком мал на большом ландшафтном экране (например, на ноутбуке или на экране компьютера). Также, если это не полные 12 столбцов для небольшого размера экрана, то он слишком мал в портретной ориентации на мобильном устройстве.

Спасибо.

(Просмотреть в полноэкранном режиме и изменять размер или вид на телефоне, чтобы увидеть проблему.)

See CodePen here

<!---->

http://codepen.io/mrseanbaines/pen/dOdoEy

Answer 1

Там есть пара способов вы можете обратиться это ... если у вас будет куча вещей, которые, по вашему мнению, вы захотите сделать cus для этого вы можете добавить пользовательскую точку останова для этого промежуточного этапа (см. http://foundation.zurb.com/sites/docs/media-queries.html#sass-variables).

Это сказало, если вы просто хотите настроить таргетинг на это изображение, в частности, это может оказаться достаточно, чтобы просто поставить максимальную высоту на него, что-то вроде

#logo { 
    margin-bottom: 20px; 
    max-height: 50vh; 
}