mobile styles and fix overflow
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
.col2-circle-content-slice-container {
|
||||
.col2-image-coopy-slice-container {
|
||||
.highlighted-circle {
|
||||
img {
|
||||
border-radius: 50%;
|
||||
|
||||
@@ -1,21 +1,41 @@
|
||||
.radial-container-col3-card {
|
||||
.sonar {
|
||||
svg {
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xs) {
|
||||
width: 250px;
|
||||
top: -646px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
top: -705px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
top: -745px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col3-card-slice-container {
|
||||
|
||||
|
||||
.col3-card-wrapper {
|
||||
z-index: 1;
|
||||
|
||||
.col3-card-item {
|
||||
position: relative;
|
||||
min-height: 40em;
|
||||
// border: 1px solid $gray-border;
|
||||
// box-shadow: 5px 5px 10px 0px rgba(119, 119, 119, 0.16);
|
||||
background-color: $white;
|
||||
// min-height: 40em;
|
||||
|
||||
.col3-card-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.col3-card-item-inner-wrapper {
|
||||
min-height: 350px;
|
||||
|
||||
.col3-card-title {
|
||||
color: $consumer-primary;
|
||||
|
||||
@@ -17,7 +17,9 @@
|
||||
.consumer-brand {
|
||||
.faq-dropdown-slice-container {
|
||||
.accordion-button {
|
||||
padding: .5rem 1.25rem
|
||||
padding: .5rem 1.25rem;
|
||||
font-size: 20px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.accordion-button,
|
||||
|
||||
@@ -43,12 +43,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(1rem + 1vw);
|
||||
font-weight: 400;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
// .consumer-brand {
|
||||
// h2 {
|
||||
// color: $consumer-primary;
|
||||
@@ -381,15 +375,15 @@ button[type="submit"].single_add_to_cart_button,
|
||||
|
||||
.padding-top-large {
|
||||
@include media-breakpoint-up(xs) {
|
||||
padding-top: 0.75rem;
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-top: 1.5rem;
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: 3rem;
|
||||
padding-top: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -423,15 +417,15 @@ button[type="submit"].single_add_to_cart_button,
|
||||
|
||||
.padding-bottom-large {
|
||||
@include media-breakpoint-up(xs) {
|
||||
padding-bottom: 0.75rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-bottom: 1.5rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-bottom: 3rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -460,17 +454,6 @@ button[type="submit"].single_add_to_cart_button,
|
||||
}
|
||||
}
|
||||
|
||||
.sonar-svg-left {
|
||||
bottom: -165%;
|
||||
left: 0;
|
||||
overflow-x: hidden;
|
||||
|
||||
svg {
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.f-white {
|
||||
color: white;
|
||||
|
||||
|
||||
@@ -6,12 +6,19 @@
|
||||
// }
|
||||
// }
|
||||
|
||||
.business-brand {
|
||||
.h2-heading-slice-container {
|
||||
h2 {
|
||||
color: $business-primary;
|
||||
}
|
||||
}
|
||||
// .business-brand {
|
||||
// .h2-heading-slice-container {
|
||||
// h2 {
|
||||
// color: $business-primary;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
h2 {
|
||||
font-size: calc(1.4rem + 1vw);
|
||||
font-weight: 400;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.f-purple h2 {
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
h4 {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
font-weight: bold;
|
||||
line-height: 32px;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
font-size: 32px;
|
||||
}
|
||||
// @include media-breakpoint-up(md) {
|
||||
// font-size: 32px;
|
||||
// }
|
||||
}
|
||||
|
||||
.f-purple h4 {
|
||||
|
||||
@@ -35,6 +35,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.main-logo img {
|
||||
height: 30px;
|
||||
width: 200px !important;
|
||||
max-width: 200px !important;
|
||||
}
|
||||
|
||||
.top-bar-items li {
|
||||
position: relative;
|
||||
align-self: center;
|
||||
@@ -56,11 +62,6 @@
|
||||
content: none;
|
||||
}
|
||||
|
||||
.main-logo img {
|
||||
height: 30px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.menu-item-has-children::after {
|
||||
content: "";
|
||||
|
||||
@@ -43,18 +43,13 @@
|
||||
margin-bottom: -85px;
|
||||
}
|
||||
|
||||
.sonar-svg-3 {
|
||||
display: none;
|
||||
.radial {
|
||||
bottom: -42%;
|
||||
right: -18%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.sonar-svg-3 {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -42%;
|
||||
right: -18%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
.pos {
|
||||
margin-bottom: -175px;
|
||||
@@ -70,10 +65,4 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sonar-svg {
|
||||
bottom: -292px;
|
||||
right: -200px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@@ -1,4 +1,14 @@
|
||||
.phone-contact-with-shortcode-slice-container {}
|
||||
.phone-contact-with-shortcode-slice-container {
|
||||
|
||||
.radial-left {
|
||||
top: -53px;
|
||||
left: 0;
|
||||
|
||||
svg {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .consumer-brand {
|
||||
// .call-title {
|
||||
|
||||
@@ -1,3 +1,29 @@
|
||||
.simple-content-slice-container {
|
||||
overflow: hidden;
|
||||
|
||||
.radial {
|
||||
right: 0;
|
||||
top: 120px;
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
// @include media-breakpoint-up(xs) {
|
||||
|
||||
// top: -646px;
|
||||
// }
|
||||
|
||||
// @include media-breakpoint-up(md) {
|
||||
// top: -705px;
|
||||
// }
|
||||
|
||||
// @include media-breakpoint-up(lg) {
|
||||
// top: -745px;
|
||||
// }
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,12 +1,14 @@
|
||||
.testimonial-slice-container {
|
||||
margin-bottom: 5rem;
|
||||
padding-bottom: 9rem;
|
||||
|
||||
.g-sky-border {
|
||||
top: 20px;
|
||||
@include media-breakpoint-up(lg) {
|
||||
.g-sky-border {
|
||||
margin-bottom: -73px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.testimonial-img {
|
||||
// border-radius: 50%;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
max-height: 300px;
|
||||
@@ -26,8 +28,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.sonar {
|
||||
.radial {
|
||||
right: 0;
|
||||
top: 0;
|
||||
top: -55px;
|
||||
|
||||
}
|
||||
}
|
||||
@@ -5,6 +5,33 @@
|
||||
|
||||
.ratio {
|
||||
max-width: 620px;
|
||||
|
||||
}
|
||||
|
||||
.radial-right-graphic {
|
||||
top: 0;
|
||||
right: -200px;
|
||||
|
||||
svg {
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
.radial-left-graphic {
|
||||
top: 0;
|
||||
left: -200px;
|
||||
|
||||
svg {
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
.radial-center-graphic {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
|
||||
svg {
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user