diff --git a/src/definitions/elements/container.less b/src/definitions/elements/container.less index 6aca27dfe..e9225edaf 100644 --- a/src/definitions/elements/container.less +++ b/src/definitions/elements/container.less @@ -36,6 +36,9 @@ margin-left: @mobileGutter !important; margin-right: @mobileGutter !important; } + .ui.grid.container { + width: @mobileGridWidth; + } } @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { .ui.container { @@ -43,19 +46,28 @@ margin-left: @tabletGutter !important; margin-right: @tabletGutter !important; } + .ui.grid.container { + width: @tabletGridWidth; + } } -@media only screen and (min-width: @smallComputerBreakpoint) and (max-width: @largeMonitorBreakpoint) { +@media only screen and (min-width: @smallMonitorBreakpoint) and (max-width: @largeMonitorBreakpoint) { .ui.container { - width: @smallComputerWidth; - margin-left: @smallComputerGutter !important; - margin-right: @smallComputerGutter !important; + width: @smallMonitorWidth; + margin-left: @smallMonitorGutter !important; + margin-right: @smallMonitorGutter !important; + } + .ui.grid.container { + width: @smallMonitorGridWidth; } } @media only screen and (min-width: @largeMonitorBreakpoint) { .ui.container { - width: @largeMWidth; - margin-left: @largeMGutter !important; - margin-right: @largeMGutter !important; + width: @largeMonitorWidth; + margin-left: @largeMonitorGutter !important; + margin-right: @largeMonitorGutter !important; + } + .ui.grid.container { + width: @largeMonitorGridWidth; } } diff --git a/src/themes/default/collections/grid.variables b/src/themes/default/collections/grid.variables index 4efa9a3a0..8273d2c50 100644 --- a/src/themes/default/collections/grid.variables +++ b/src/themes/default/collections/grid.variables @@ -37,7 +37,7 @@ @tabletWidth: auto; @tabletMargin: 0em; -@tabletGutter: 8%; +@tabletGutter: 2em; @computerWidth: auto; @computerMargin: 0em; @@ -51,7 +51,6 @@ @widescreenMargin: 0em; @widescreenMonitorGutter: 23%; - /*-------------- Relaxed ---------------*/ diff --git a/src/themes/default/elements/container.variables b/src/themes/default/elements/container.variables index 3009bf460..2a95d0dbf 100644 --- a/src/themes/default/elements/container.variables +++ b/src/themes/default/elements/container.variables @@ -21,11 +21,16 @@ @smallMonitorWidth: 960px; @smallMonitorGutter: auto; -@largeMonitorWidth: 1120px; -@largeMonitorBreakpoint: 1148px; +@largeMonitorWidth: 1200px; +@largeMonitorBreakpoint: 1228px; @largeMonitorGutter: auto; -/* Adjust breakpoints to match fixed width */ +/* Coupling (Add Negative Margin to container size) */ +@gridGutterWidth: 2em; +@mobileGridWidth: @mobileWidth; +@tabletGridWidth: ~"calc("@tabletWidth~" + "@gridGutterWidth~")"; +@smallMonitorGridWidth: ~"calc("@smallMonitorWidth~" + "@gridGutterWidth~")"; +@largeMonitorGridWidth: ~"calc("@largeMonitorWidth~" + "@gridGutterWidth~")"; /*------------------- Types