How to do 50% / 50% mobile columns and fixed spacing desktop columns using Zurb Foundation?

Question

This may be a typical selection panel, which is on the desktop:

and on an mobile phone:

Can Zurb Foundation do this? I think one catch is, for medium width and up, the width of the 2 columns are supposed to be fixed, instead of dynamic. (choice 2 can have long width or short width, because the background is transparent and won't show. The importance is the fixed spacing between Choice 1, the vertical separation line, and Choice 2).

I put some desired behavior on CodePen, although they are customized for desktop and mobile, but can't be both:

Desktop: http://codepen.io/anon/pen/oxZpzg
Mobile: http://codepen.io/anon/pen/KzWZwQ

For mobile:

<div class="row text-center">
  <div class="small-6 column">Choice 1</div>
  <div class="small-6 column">Choice 2</div>
</div>

and it seems no way to style it for Desktop's fixed spacing.

Right now I can style the desktop version using plain CSS, and then using media query to style the mobile version, and no Zurb Foundation is used. Could Foundation be used for both mobile and desktop, or use Foundation for one case and use media query for the other case?

Add an extra class to the "Choice 1" column and add a rule that sets the width to a fixed value on breakpoints medium and up. Very easy to do if you are using the Sass version of Foundation. — Colin Marshall, Mar 21 '16 at 23:33

score 0 · Answer 1 · answered Jul 20 '16 at 06:59

Just write it in SCSS, compile it into CSS and use a plain CSS. This SCSS code can do the trick:

.column {
  background: #ffc;
  color: #333;
  padding: 20px;

  @media #{$small-only} {
    width: 50%;
  }

  &:first-child {
    border-right: 1px solid #bbb;

    @media #{$medium-up} {
      width: 200px;
    }
  }

  &:last-child {
    @media #{$medium-up} {
      width: calc(100% - 200px);
    }
  }
}

Compiled CSS:

body {
  padding-top: 50px;
}

.column {
  background: #ffc;
  color: #333;
  padding: 20px;
}

@media only screen and (max-width: 40em) {
  .column {
    width: 50%;
  }
}

.column:first-child {
  border-right: 1px solid #bbb;
}

@media only screen and (min-width: 40.0625em) {
  .column:first-child {
    width: 200px;
  }
}

@media only screen and (min-width: 40.0625em) {
  .column:last-child {
    width: calc(100% - 200px);
  }
}

Updated HTML:

<div class="row text-center">
  <div class="column">Choice 1</div>
  <div class="column">Choice 2</div>
</div>

CodePen link

How to do 50% / 50% mobile columns and fixed spacing desktop columns using Zurb Foundation?

1 Answers1