From 46467bbfefc4db2158a008ee9265399164cf7b80 Mon Sep 17 00:00:00 2001 From: Thomas JUND Date: Tue, 6 Dec 2022 17:58:35 +0100 Subject: [PATCH] css: manage flex grid gutters with negative left margin to prevent right overflow --- static/includes/_fx-grid.scss | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/static/includes/_fx-grid.scss b/static/includes/_fx-grid.scss index e6920a85..76195e06 100644 --- a/static/includes/_fx-grid.scss +++ b/static/includes/_fx-grid.scss @@ -12,9 +12,6 @@ $max-cols-mobile : 3 !default; $max-cols-tablet : 6 !default; $max-cols-desktop : 9 !default; -// Computed variables, they should not be redefined. -$fx-grid-half-gutter: $fx-grid-gutter / 2; - // custom media queries // ex. @media ($max-grid-mobile-viewport) {} $max-grid-mobile-viewport: "max-width: #{$fx-grid-mobile-limit}"; @@ -28,15 +25,13 @@ $min-grid-desktop-viewport: "min-width: #{min-desktop-viewport($fx-grid-tablet-l flex-wrap: wrap; margin: 0; padding: 0; - margin-left: -1 * $fx-grid-half-gutter; - margin-right: -1 * $fx-grid-half-gutter; + margin-left: -1 * $fx-grid-gutter; /* if flex item are list */ list-style-type: none; > * { box-sizing: border-box; // for gadjo - margin-left: $fx-grid-half-gutter; - margin-right: $fx-grid-half-gutter; + margin-left: $fx-grid-gutter; flex-basis: calc(100% - #{$fx-grid-gutter}); hyphens: auto; } -- 2.39.2