Menu icon Foundation
Multiple $column-gutter values?

Different $column-gutter value for medium-up. Is this possible? How can this be done?

$column-gutter: rem-calc(40);

//Medium-up: 
$column-gutter: rem-calc(90);

            

         

gutterpaddingcolumn-gutter

Different $column-gutter value for medium-up. Is this possible? How can this be done?

$column-gutter: rem-calc(40);

//Medium-up: 
$column-gutter: rem-calc(90);

            

         
Alexander Assimidis over 5 years ago

Try this

@media #{$medium-up} {
$column-gutter: rem-calc(90);
 }

Bardia over 5 years ago

Ok, great. In which file should i place this?

Alexander Assimidis over 5 years ago

Create a new File named "_medium.scss" put it in your SCSS Directory and add it to ur app.scss after your "custom.scss" for example

@import
  "foundation/components/grid",
  "foundation/components/accordion",
  "foundation/components/alert-boxes",
  "foundation/components/block-grid",
  "foundation/components/breadcrumbs",
  "foundation/components/button-groups",
  "foundation/components/buttons",
  "foundation/components/clearing",
  "foundation/components/dropdown",
  "foundation/components/dropdown-buttons",
  "foundation/components/flex-video",
  "foundation/components/forms",
  "foundation/components/inline-lists",
  "foundation/components/joyride",
  "foundation/components/keystrokes",
  "foundation/components/labels",
  "foundation/components/magellan",
  "foundation/components/orbit",
  "foundation/components/pagination",
  "foundation/components/panels",
  "foundation/components/pricing-tables",
  "foundation/components/progress-bars",
  "foundation/components/range-slider",
  "foundation/components/reveal",
  "foundation/components/side-nav",
  "foundation/components/split-buttons",
  "foundation/components/sub-nav",
  "foundation/components/switch",
  "foundation/components/tables",
  "foundation/components/tabs",
  "foundation/components/thumbs",
  "foundation/components/tooltips",
  "foundation/components/top-bar",
  "foundation/components/type",
  "foundation/components/offcanvas",
  "foundation/components/visibility",
  "YOUR_CUSTOM_SCSS_FILE",
  "medium";

If you only want to change that little peace just put in your custom.scss File.
If you have any further questions just ask.

Bardia over 5 years ago

Thanks for the reply Alexander.

Somehow this is still not working. Im currently using jointsWP and added the little snippet you provided to the _medium.scss. (It reads all the other styles in that file but do not execute your snippet.)

Any suggestions?

Alexander Assimidis over 5 years ago

Did u watch in Firebug if this Style is changin? Could u post ur Site?

Marco about 4 years ago

Hi guys!

Bardia - did you find a solution for this or is it not possible?

Kind regards