How to change width when columns collapse with zurb foundation template - css

Question

I'm using zurb foundation this template.
This is a 3 columns template, and the columns collapse when window width become around under 1000 pixel.
But I don't want to make them collapse until 700 pixel. How can I change it?
In rails environment, I changed like this, but nothing seems to happen.
// foundation_and_overrides.scss
- // $row-width: rem-calc(1000);
+ $row-width: rem-calc(700);
If possible I want to delete [ad] column when the width is under 1000 px and collapse when under 700 px. If the implementation is not difficult, I'd prefer this behavior.

Answer 1

It looks like you're experiencing two issues here.
First, the template you reference uses the medium grid class. When the screen size hits the medium breakpoint they made the columns go full width. Here's how the rows are setup in that template:
<div class="row">
<div class="large-3 columns">
<!-- Content Here -->
</div>
<div class="large-6 columns">
<!-- Content Here -->
</div>
<div class="large-3 columns">
<!-- Content Here -->
</div>
</div>
To change this so the columns stay fixed until around 700px you could change the column classes to:
<div class="row">
<div class="medium-3 columns">
<!-- Content Here -->
</div>
<div class="medium-6 columns">
<!-- Content Here -->
</div>
<div class="medium-3 columns">
<!-- Content Here -->
</div>
</div>
The second issue is the media-query breakpoints. By default, the $small-range size is 0-40em. Depending on what you've set your $rem-base to you may need to change the ranges appropriately.
For example, if your $rem-base is the default 16px this means your grid collapses to a single column (using the HTML above) at 16px * 40 = 640px.
If you want it to collapse at exactly 700px, and your $base-rem is 16px you would need to change $small-range to (0em, 43.5em).