Fixing column widths in Zurb Foundation 3?

I have a layout where one of my columns contains a declaration. See Image 1:

image1

The ad image is in a four column div. The ad is an MREC 300 pixels wide. However, on the iPad, as the columns get smaller, the ad goes down to 236px, which is no-no. See image 2 below, of course it looks the same here, but it's smaller:

image2

I need it to stay at 300px. Also, sometimes the ad server can serve an iframe based ad (also 300px).

So the div shouldn't shrink the width.

I tried adding a class to this and set the css to min-width: 300px, but then on iPad it sticks out the right edge; the other div doesn't shrink accordingly enough. See Image 3:

image3

So how can I ensure that the div with my ads is not resized on the iPad?

EDIT: Also, the problem seems complicated when I change the order of the columns using push-pull. I do this since I need the ad to be first on the phone, but second on other platforms:

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

      

+3


source to share


2 answers


To get this to work, I had to go a bit outside of Foundation. Here's what you need.

Example: http://cdpn.io/Kypen

Clarifications: I created an ad wrapper .ad

and .container

.



.ad

is 300 pixels wide and floats to the right; while the element .container

is scaled to be 320 pixels wide. Because Foundation uses the size of the border, the margin counts against the width of the shared element .container

. As a result, it .ad

is inside the "false margin" (20 additional px for white). This is an old trick and it works great inside the Foundation.row and .column elements, and it doesn't affect the creation of nested rows.

I also added a media query, which can be used to change the behavior at low resolution.

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

      

+8


source


When I needed to set the width of the sidebar, I ended up with calc (). I wanted to have a sidebar below the main content on smaller devices and that was very easy.

My layout in haml

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

      



Styles

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

      

The $ small parameter for media queries is really confusing as it actually means "more than small".

0


source







All Articles