Menu icon Foundation
How do you set the gutters to be greater of a Semantically Grid
 .container {
          @include grid-row(12);
            display: block;
              .col-left {
                @include breakpoint(large) {
                  @include grid-column(6,50px);
                }
                @include breakpoint(small) {
                  @include grid-column(12, 0);
                }
              }
              .col-right {
              @include breakpoint(large) {
                @include grid-column(6,50px);
              }
              @include breakpoint(small) {
                @include grid-column(12, 0);
              }
            }
            }

Semantically GridGutter sizes

 .container {
          @include grid-row(12);
            display: block;
              .col-left {
                @include breakpoint(large) {
                  @include grid-column(6,50px);
                }
                @include breakpoint(small) {
                  @include grid-column(12, 0);
                }
              }
              .col-right {
              @include breakpoint(large) {
                @include grid-column(6,50px);
              }
              @include breakpoint(small) {
                @include grid-column(12, 0);
              }
            }
            }

Brett Mason over 2 years ago

Hi Kyle

Looks like you were nearly there.
Just remove the `px` from the code and that should work how you want it to (just tested it myself).

Here's a full example:

.container {
	@include grid-row(12);

	.col-left {
		@include grid-column(12, 0);

		@include breakpoint(medium) {
			@include grid-column(6, 50);
		}
	}

	.col-right {
		@include grid-column(12, 0);

		@include breakpoint(medium) {
			@include grid-column(6, 50);
		}
	}
}

Kyle De Sousa over 2 years ago

Awesome, thanks man