diff --git a/src/definitions/elements/container.less b/src/definitions/elements/container.less index 330d040fd..f9876c10d 100644 --- a/src/definitions/elements/container.less +++ b/src/definitions/elements/container.less @@ -27,36 +27,35 @@ .ui.container { display: block; - margin: 0px auto !important; max-width: @maxWidth; } -@media only screen and (max-width: (@largestMobileScreen)) { +@media only screen and (max-width: @largestMobileScreen) { .ui.container { width: @mobileWidth; - margin-left: @mobileGutter; - margin-right: @mobileGutter; + margin-left: @mobileGutter !important; + margin-right: @mobileGutter !important; } } -@media only screen and (min-width: @tabletBreakpoint ) { +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { .ui.container { width: @tabletWidth; - margin-left: @tabletGutter; - margin-right: @tabletGutter; + margin-left: @tabletGutter !important; + margin-right: @tabletGutter !important; } } -@media only screen and (min-width: @smallComputerBreakpoint) { +@media only screen and (min-width: @smallComputerBreakpoint) and (max-width: @largeComputerBreakpoint) { .ui.container { width: @smallComputerWidth; - margin-left: @smallComputerGutter; - margin-right: @smallComputerGutter; + margin-left: @smallComputerGutter !important; + margin-right: @smallComputerGutter !important; } } @media only screen and (min-width: @largeComputerBreakpoint) { .ui.container { width: @largeComputerWidth; - margin-left: @largeComputerGutter; - margin-right: @largeComputerGutter; + margin-left: @largeComputerGutter !important; + margin-right: @largeComputerGutter !important; } } @@ -69,7 +68,12 @@ .ui.text.container { display: block; margin: 0px auto; - width: @textWidth; + max-width: @textWidth; +} + +.ui.text.container p { + font-size: @textParagraphSize; + line-height: @textParagraphLineHeight; } diff --git a/src/themes/default/elements/container.variables b/src/themes/default/elements/container.variables index c3fec8ee5..9615f1094 100644 --- a/src/themes/default/elements/container.variables +++ b/src/themes/default/elements/container.variables @@ -20,11 +20,13 @@ @largeComputerGutter: auto; /* Adjust breakpoints to match fixed width */ -@smallComputerBreakpoint: @smallComputerWidth + 28px; -@largeComputerBreakpoint: @largeComputerWidth + 28px; +@smallComputerBreakpoint: 988px; +@largeComputerBreakpoint: 1228px; /*------------------- Types --------------------*/ @textWidth: 700px; +@textParagraphSize: @large; +@textParagraphLineHeight: 1.5; \ No newline at end of file