Исправление ширины столбца в Zurb Foundation 3?

У меня есть макет, в котором одна из моих колонок содержит рекламу. См. изображение 1:

image1

Рекламное изображение находится в четырехколоночном блоке div. Объявление представляет собой MREC шириной 300 пикселей. Однако на iPad, поскольку столбцы уменьшаются, размер объявления уменьшается до 236 пикселей, что недопустимо. См. изображение 2 ниже, конечно, здесь оно выглядит так же, но меньше:

image2

Мне нужно, чтобы он оставался на уровне 300 пикселей. Кроме того, иногда рекламный сервер может отображать рекламу на основе iframe (также 300 пикселей).

Так что div не должен уменьшать ширину.

Я попытался добавить класс к этому и установить css на min-width: 300px, но затем на iPad он торчит с правого края; другой div недостаточно сжимается. См. изображение 3:

image3

Итак, как я могу гарантировать, что размеры div с моей рекламой не изменятся на iPad?

РЕДАКТИРОВАТЬ: Кроме того, проблема усугубляется, когда я меняю порядок столбцов с помощью двухтактного. Я делаю это, потому что мне нужно, чтобы реклама была первой на телефоне, но второй на других платформах:

<div class="row">
<div class="four columns ad push-eight">
    <img src="http://placehold.it/300x300">
</div>
<div class="eight columns pull-four">
  <h1>Bacon ipsum dolor sit amet tri-tip shankle chicken leberkas beef pork</h1>
</div>


css responsive-design zurb-foundation
person Steve    schedule 28.01.2013    source источник
comment
Вам нужен адаптивный дизайн или нет? Если вы это сделаете, вам придется изменить размер изображения или рассмотреть другой макет для планшетов (Foundation должен предоставить для этого отличную основу).   -  person Pavlo    schedule 28.01.2013
comment
Я хочу адаптивный дизайн, но контракт на рекламу требует, чтобы мы не возились с размером рекламы. Отсюда мой вопрос.   -  person Steve    schedule 28.01.2013

Ответы (2)


arrow_upward
8
arrow_downward

Чтобы заставить это работать, мне пришлось немного выйти за пределы Foundation. Вот что вам понадобится.

Пример: http://cdpn.io/Kypen.

Объяснение: я создал рекламную оболочку .ad и элемент .container.

.ad имеет ширину 300 пикселей и перемещается вправо; в то время как элемент .container получает поле шириной 320 пикселей. Поскольку Foundation использует размер рамки, поле учитывается в ширине всего элемента .container. В результате .ad находится внутри «ложного поля» (дополнительные 20 пикселей предназначены для пустого пространства). Это старый трюк, и он отлично работает внутри элементов Foundation .row и .column, кроме того, он также не влияет на создание вложенных строк.

Я также добавил медиа-запрос, который можно использовать для изменения поведения при низком разрешении.

.ad
{
  float:right;
  width:300px;
}
.container
{
  position:relative;
  margin-right:320px;
}
@media only screen and (max-width: 767px)
  {
  .ad
  {float:none;}
  .container
  {margin:0;}
}
person Ed Charbeneau    schedule 29.01.2013

arrow_upward
0
arrow_downward

Когда мне нужно было исправить ширину моей боковой панели, я сделал это с помощью calc(). Я хотел, чтобы моя боковая панель располагалась под основным контентом на небольших устройствах, и это было очень просто.

Моя раскладка в haml

.row
  .content.column.large-9
    = yield
  .sidebar.column.large-3
    = render 'sidebar'

Стили

.sidebar{
  width: 100%;
}
.content {
  width: 100%;
}
@media #{$small} {
  .sidebar {
    width: 225px !important;
  }
  .content {
    width: 70.2% !important; /* Fallback for older browsers */
    width: calc(100% - 240px) !important;
  }
}

Параметр медиа-запроса $small действительно сбивает с толку, поскольку на самом деле означает «больше, чем мало».

person Mika    schedule 04.10.2013