Menu icon Foundation
$global-gutter for mobile (small) screens

Is there a simple way to modify _settings.scss to accommodate a $global-gutter setting for small screens? I'd like to have a large screen gutter of 80px, but a 40px one on mobile.

$global-gutterglobalgutteremailmobile

Is there a simple way to modify _settings.scss to accommodate a $global-gutter setting for small screens? I'd like to have a large screen gutter of 80px, but a 40px one on mobile.

Bryan almost 3 years ago

Actually, just solved this myself. Added the following to app.scss:

@media screen and (max-width: 480px) {
  th.columns.first.small-12 {
    padding-left: 40px !important;
  }
  th.columns.last.small-12 {
    padding-right: 40px !important;
  }
}

If there's a more elegant way of accomplishing this, though, please let me know!