css - framework - ¿Cómo arreglar el ancho de una columna en Zurb Foundation 3?

zurb foundation components

Question

Tengo un diseño donde una de mis columnas contiene un anuncio. Ver imagen 1:

La imagen del anuncio está en un div de cuatro columnas. El anuncio es un MREC que tiene 300 px de ancho. Sin embargo, en el iPad, como las columnas se reducen, el anuncio baja a 236 px, lo que es un no-no. Vea la imagen 2 a continuación, por supuesto, se ve igual aquí pero es más pequeña:

Necesito que se quede en 300px. Además, a veces el servidor de anuncios puede publicar un anuncio basado en iframe (también 300 px).

Entonces, ese div no necesita reducir el ancho.

Intenté agregar una clase a eso y establecer css en min-width: 300px, pero luego en el iPad sobresale el borde derecho; el otro div no se contrae lo suficiente. Ver imagen 3:

Entonces, ¿cómo me aseguro de que los divs con mis anuncios no se vuelvan a clasificar según el tamaño en el iPad?

EDITAR: Además, el problema parece agravado cuando invierto el orden de las columnas con push-pull. Lo hago porque necesito que el anuncio aparezca primero en el teléfono pero luego en otras plataformas:

<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>

Answer 1

Para que esto funcione, tuve que salir un poco de Foundation. Esto es lo que necesitarás.

Ejemplo: http://cdpn.io/Kypen

Explicado: .container un ad wrapper .ad y un .container element.

El .ad tiene 300 px de ancho y flota a la derecha; mientras que el elemento .container tiene un margen amplio de .container . Como Foundation usa el tamaño del recuadro de la frontera, el margen se suma al ancho del elemento .container general. Como resultado, el .ad encuentra dentro del "margen falso" (los 20 píxeles adicionales son para espacios en blanco). Este es un viejo truco y funciona perfectamente dentro de los elementos .row & .column de Foundation, además no afecta la creación de filas anidadas.

También agregué una consulta de medios, el uso puede usar esto para cambiar el comportamiento a baja resolución.

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

Answer 2

Cuando necesité arreglar el ancho de mi barra lateral terminé haciéndolo con calc (). Quería tener mi barra lateral debajo del contenido principal en dispositivos más pequeños y de esta manera fue realmente fácil.

Mi diseño en haml

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

Estilos

.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;
  }
}

El parámetro de consulta de medios $ small es realmente confuso ya que realmente significa "más grande que pequeño".