responsive containers fixes

tabler · Nov 3, 2020 · 35c591d · 35c591d
1 parent 93f8376
commit 35c591d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/src/pages/_includes/layout/homepage.html b/src/pages/_includes/layout/homepage.html
@@ -102,7 +102,7 @@ <h3 class="card-title">Traffic summary</h3>
 		{% include cards/small-stats.html color="yellow" chart-type="pie" chart-data="22/100" color="yellow" count="132" subtitle="Comments" description="16 waiting" %}
 	</div>
 
-	<div class="col-md-6 col-lg-8">
+	<div class="col-md-12 col-lg-8">
 		{% include cards/most-visited-pages.html %}
 	</div>
 
@@ -114,7 +114,7 @@ <h3 class="card-title">Traffic summary</h3>
 		{% include cards/social-traffic.html %}
 	</div>
 
-	<div class="col-md-6 col-lg-8">
+	<div class="col-md-12 col-lg-8">
 		{% include cards/tasks.html %}
 	</div>
 

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -203,6 +203,9 @@ $hr-margin-y: 2rem !default;
 $caret-spacing: .4em !default;
 
 //Sizing
+$grid-gutter-width: 1rem !default;
+$container-padding-x: 1.5rem !default;
+
 $spacer: 1rem !default;
 $spacers: (
   0: 0,
@@ -299,7 +302,6 @@ $card-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
 $card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default;
 
 $cards-grid-gap: 1rem !default;
-$cards-grid-gap-sm: .5rem !default;
 $cards-grid-breakpoint: lg !default;
 
 //carousel
@@ -331,9 +333,6 @@ $dropdown-link-active-bg: $active-bg !default;
 
 $dropdown-menu-max-width: 25rem !default;
 
-//grid
-$grid-gutter-width: 1rem !default;
-$container-padding-x: .75rem !default;
 
 //loader
 $loader-size: 2.5rem !default;

diff --git a/src/scss/ui/_grid.scss b/src/scss/ui/_grid.scss
@@ -2,10 +2,20 @@
   border-left: 1px solid $border-color;
 }
 
+%container-common {
+  @include media-breakpoint-down($cards-grid-breakpoint) {
+    --bs-gutter-x: #{$grid-gutter-width};
+  }
+}
+
+.container,
+.container-fluid {
+  @extend %container-common;
+}
+
 .container {
   @each $variation, $size in $container-variations {
     &-#{$variation} {
-      @include make-container();
       max-width: $size;
     }
   }
@@ -49,7 +59,7 @@
   }
 
   @include media-breakpoint-down($cards-grid-breakpoint) {
-    --#{$variable-prefix}gutter-x: #{$cards-grid-gap-sm};
-    --#{$variable-prefix}gutter-y: #{$cards-grid-gap-sm};
+    --#{$variable-prefix}gutter-x: #{$cards-grid-gap / 2};
+    --#{$variable-prefix}gutter-y: #{$cards-grid-gap / 2};
   }
 }