+ class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4 p-md-4">
{{ buttonLabel }}
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index a15d8bb0b..4a7818834 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -271,6 +271,10 @@ export default {
margin-top: 1rem;
text-align: center;
+ a {
+ @include responsive-font-size-md(0.875rem, 1rem);
+ }
+
.button-question {
.question-text {
margin-top: 0.5rem;
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index a378f881e..ac50e7d70 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -4,13 +4,25 @@ body {
font-size: 16px;
background-color: #fff;
color: #4d5151;
+ #app {
+ display: flex;
+ flex-direction: column;
+ min-height: 100dvh;
+ form {
+ > .container-fluid {
+ margin-bottom: -1rem;
+ @media screen and (min-width: 1090px) {
+ margin-bottom: -5rem;
+ }
+ }
+ }
+ }
.container-fluid {
padding: 0 1.5rem;
.prevent-squish {
overflow-x: unset;
}
&.page-container-grouped-styles {
- height: 100dvh;
display: flex;
flex-direction: column;
}
diff --git a/src/styles/common-typography-styles.scss b/src/styles/common-typography-styles.scss
index 6a9c4f893..a6ab8289f 100644
--- a/src/styles/common-typography-styles.scss
+++ b/src/styles/common-typography-styles.scss
@@ -8,6 +8,7 @@ body {
//Headings
//add helper fw-bold to any element to get bold style (500)
+
h1,
.h1 {
line-height: 1.325;
@@ -36,6 +37,7 @@ h5,
.h5 {
line-height: 1.325;
font-weight: 400;
+ @include responsive-font-size-md(1.25rem, 1.625rem);
}
h6,
diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss
index d0670ad6c..62abcc82d 100644
--- a/src/styles/mixins/customMixins.scss
+++ b/src/styles/mixins/customMixins.scss
@@ -8,3 +8,15 @@
@mixin box-shadow-hover($color) {
box-shadow: 0 0 0 4px $color;
}
+
+// Typography size mixin for medium breakpoints
+// Use this to adjust font size for medium breakpoint
+@mixin responsive-font-size-md($font-size, $md-font-size) {
+ font-size: $font-size;
+
+ @include media-breakpoint-up(md) {
+ font-size: $md-font-size;
+ }
+}
+// Usage: @include responsive-font-size-md(mobile-font-size-in-rem, desktop-font-size-in-rem);
+// Example: @include responsive-font-size-md(0.875rem, 1rem);
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index df984b224..5c4045fd7 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -141,7 +141,7 @@ $h1-font-size: $font-size-base * 3;
$h2-font-size: $font-size-base * 2.625;
$h3-font-size: $font-size-base * 2;
$h4-font-size: $font-size-base * 1.625;
-$h5-font-size: $font-size-base * 1.25;
+//$h5-font-size: $font-size-base * 1.25;// Font size set in customMixins.scss
$h6-font-size: $font-size-base * 0.875;
//Border Radius
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 1ebc46cc7..d31f20e5d 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -5,7 +5,7 @@
v-model="selectedValue">
+ class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4 p-md-4">
{{ buttonLabel }}
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index 30cd2d7e5..9283c08e7 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -80,10 +80,14 @@ a {
}
&.navigation-link,
&.new-window-link {
+ font-size: 0.875rem;
color: $black;
line-height: 26px;
white-space: nowrap;
align-items: center;
+ @include media-breakpoint-up(md) {
+ font-size: 1rem;
+ }
}
&.new-window-link {
margin-bottom: 1.5rem;