diff --git a/_breakpoints.scss b/_breakpoints.scss index 96f601b..1d6306a 100644 --- a/_breakpoints.scss +++ b/_breakpoints.scss @@ -1,4 +1,4 @@ -$breakpoints: ("mobile":450px); +$breakpoints: ("mobile":500px); @mixin mobile { @media (max-width: map-get($breakpoints, "mobile")) { @content; diff --git a/style.css b/style.css index 8a2b7ad..d3f79af 100644 --- a/style.css +++ b/style.css @@ -76,7 +76,7 @@ a { z-index: 5; display: none; } -@media (max-width: 450px) { +@media (max-width: 500px) { .hamburger-menu { display: block; } @@ -112,7 +112,7 @@ a { header { position: relative; } -@media (max-width: 450px) { +@media (max-width: 500px) { header { display: flex; flex-direction: column; @@ -125,7 +125,7 @@ header .top-bar .container { display: flex; flex-direction: row; } -@media (max-width: 450px) { +@media (max-width: 500px) { header .top-bar .container { width: 100%; justify-content: space-between; @@ -136,7 +136,7 @@ header .top-bar .container .top-bar-button { width: 10%; justify-content: center; } -@media (max-width: 450px) { +@media (max-width: 500px) { header .top-bar .container .top-bar-button { display: none; } @@ -152,7 +152,7 @@ header .top-bar .container h5 { text-align: left; width: 75%; } -@media (max-width: 450px) { +@media (max-width: 500px) { header .top-bar .container h5 { width: 70%; text-align: center; @@ -165,7 +165,7 @@ header .top-bar .container #lang { width: 5%; margin-right: 2%; } -@media (max-width: 450px) { +@media (max-width: 500px) { header .top-bar .container #lang { display: none; } @@ -178,7 +178,7 @@ header .top-bar .container .social { border-left: 1px solid lightgrey; margin: 0; } -@media (max-width: 450px) { +@media (max-width: 500px) { header .top-bar .container .social { width: 30%; } @@ -190,7 +190,7 @@ header .top-bar .container .social figure { header .mid-bar { padding: 3rem 0 5rem; } -@media (max-width: 450px) { +@media (max-width: 500px) { header .mid-bar { padding: 2rem 0; background-color: white; @@ -201,7 +201,7 @@ header .mid-bar .container { flex-direction: row; justify-content: space-between; } -@media (max-width: 450px) { +@media (max-width: 500px) { header .mid-bar .container { display: flex; flex-direction: column; @@ -211,7 +211,7 @@ header .mid-bar .container .logo { width: 25%; margin-right: 10%; } -@media (max-width: 450px) { +@media (max-width: 500px) { header .mid-bar .container .logo { width: 60%; margin-left: 5%; @@ -222,7 +222,7 @@ header .mid-bar .container .contact-details { justify-content: flex-end; width: 22%; } -@media (max-width: 450px) { +@media (max-width: 500px) { header .mid-bar .container .contact-details { display: none; } @@ -256,7 +256,7 @@ header .navbar { position: absolute; bottom: -2rem; } -@media (max-width: 450px) { +@media (max-width: 500px) { header .navbar { display: flex; flex-direction: column; @@ -275,7 +275,7 @@ header .navbar .menu { margin: 0; width: 75%; } -@media (max-width: 450px) { +@media (max-width: 500px) { header .navbar .menu { display: flex; flex-direction: column; @@ -295,7 +295,7 @@ header .navbar .menu a { padding: 0 1.6rem; transition: background-color 0.5s; } -@media (max-width: 450px) { +@media (max-width: 500px) { header .navbar .menu a { padding: 1rem 0; } @@ -311,7 +311,7 @@ header .navbar .search { display: flex; justify-content: flex-end; } -@media (max-width: 450px) { +@media (max-width: 500px) { header .navbar .search { width: 80%; position: absolute; @@ -340,7 +340,7 @@ header .navbar a.cart { background-color: transparent; transition: background-color 0.5s; } -@media (max-width: 450px) { +@media (max-width: 500px) { header .navbar a.cart { position: absolute; top: 0; @@ -363,7 +363,7 @@ header .navbar a.cart:hover { object-position: bottom; height: 65vh; } -@media (max-width: 450px) { +@media (max-width: 500px) { .upfold { height: auto; } @@ -380,7 +380,7 @@ header .navbar a.cart:hover { top: 30%; width: 100%; } -@media (max-width: 450px) { +@media (max-width: 500px) { .upfold .upfold-text { top: auto; bottom: 0; @@ -396,7 +396,7 @@ header .navbar a.cart:hover { margin-bottom: 5%; color: #103660; } -@media (max-width: 450px) { +@media (max-width: 500px) { .upfold .upfold-text .container h1 { font-size: 2rem; text-align: center; @@ -405,7 +405,7 @@ header .navbar a.cart:hover { margin-bottom: 10%; } } -@media (max-width: 450px) { +@media (max-width: 500px) { .upfold .upfold-text .container .upfold-links { display: flex; flex-direction: row; @@ -423,7 +423,7 @@ header .navbar a.cart:hover { font-weight: 500; transition: background-color 0.5s, color 0.5s; } -@media (max-width: 450px) { +@media (max-width: 500px) { .upfold .upfold-text .container .upfold-links a { display: flex; justify-content: center; @@ -456,7 +456,7 @@ header .navbar a.cart:hover { display: flex; flex-direction: row; } -@media (max-width: 450px) { +@media (max-width: 500px) { .get-quote .container { display: flex; flex-direction: column; @@ -468,7 +468,7 @@ header .navbar a.cart:hover { .get-quote .container .get-quote-text { width: 90%; } -@media (max-width: 450px) { +@media (max-width: 500px) { .get-quote .container .get-quote-text { width: 100%; } @@ -502,7 +502,7 @@ header .navbar a.cart:hover { padding: 5% 0; text-align: center; } -@media (max-width: 450px) { +@media (max-width: 500px) { .about { padding: 3rem 0; padding-bottom: 0; @@ -512,7 +512,7 @@ header .navbar a.cart:hover { display: flex; flex-direction: column; } -@media (max-width: 450px) { +@media (max-width: 500px) { .about .container .about-text { width: 90%; margin: 0 auto; @@ -545,7 +545,7 @@ header .navbar a.cart:hover { margin-top: 5%; box-shadow: 0rem 0 2rem rgba(0, 0, 0, 0.361); } -@media (max-width: 450px) { +@media (max-width: 500px) { .about .container .services-short { margin-top: 4rem; display: flex; @@ -557,7 +557,7 @@ header .navbar a.cart:hover { position: relative; border-right: 1px solid rgba(196, 196, 196, 0.361); } -@media (max-width: 450px) { +@media (max-width: 500px) { .about .container .services-short .content-box { border: none; } @@ -566,7 +566,7 @@ header .navbar a.cart:hover { opacity: 0; transition: opacity 0.5s; } -@media (max-width: 450px) { +@media (max-width: 500px) { .about .container .services-short .content-box:nth-child(2) { background-image: url(images/pexels-karolina-grabowska-5882705.jpg); background-position: center; @@ -639,7 +639,7 @@ header .navbar a.cart:hover { text-align: center; color: white; } -@media (max-width: 450px) { +@media (max-width: 500px) { .progress-report .container .progress-report-text { width: 90%; margin-left: 5%; @@ -658,7 +658,7 @@ header .navbar a.cart:hover { flex-direction: row; justify-content: space-between; } -@media (max-width: 450px) { +@media (max-width: 500px) { .progress-report .container .progress-report-blocks { flex-wrap: wrap; justify-content: space-between; @@ -673,7 +673,7 @@ header .navbar a.cart:hover { color: white; margin-top: 5%; } -@media (max-width: 450px) { +@media (max-width: 500px) { .progress-report .container .progress-report-blocks .progress-box { width: 50%; } @@ -692,7 +692,7 @@ header .navbar a.cart:hover { .industries { margin: 5% 0; } -@media (max-width: 450px) { +@media (max-width: 500px) { .industries { margin: 3rem 0; } @@ -708,7 +708,7 @@ header .navbar a.cart:hover { font-size: 2.5rem; text-align: center; } -@media (max-width: 450px) { +@media (max-width: 500px) { .industries .container .heading { padding-bottom: 5rem; } @@ -722,7 +722,7 @@ header .navbar a.cart:hover { left: 47.5%; top: 60%; } -@media (max-width: 450px) { +@media (max-width: 500px) { .industries .container .heading::after { width: 20%; left: 40%; @@ -739,7 +739,7 @@ header .navbar a.cart:hover { display: flex; margin-bottom: 5%; } -@media (max-width: 450px) { +@media (max-width: 500px) { .industries .container .industry-list li { width: 50%; display: flex; @@ -754,7 +754,7 @@ header .navbar a.cart:hover { .industries .container .industry-list li:nth-child(4), .industries .container .industry-list li:nth-child(5), .industries .container .industry-list li:nth-child(6) { margin-bottom: 0; } -@media (max-width: 450px) { +@media (max-width: 500px) { .industries .container .industry-list li:nth-child(4) { margin-bottom: 2rem; } @@ -769,7 +769,7 @@ header .navbar a.cart:hover { border-radius: 3rem; background-color: #652EE1; } -@media (max-width: 450px) { +@media (max-width: 500px) { .industries .container .industry-list li figure { width: 4rem; height: 4rem; @@ -793,7 +793,7 @@ header .navbar a.cart:hover { background-color: #EEEFF3; padding: 5% 0; } -@media (max-width: 450px) { +@media (max-width: 500px) { .team { padding: 3rem 0; } @@ -818,7 +818,7 @@ header .navbar a.cart:hover { flex-direction: row; justify-content: space-between; } -@media (max-width: 450px) { +@media (max-width: 500px) { .team .container .staffs { flex-wrap: wrap; justify-content: space-around; @@ -831,7 +831,7 @@ header .navbar a.cart:hover { height: 40vh; overflow: hidden; } -@media (max-width: 450px) { +@media (max-width: 500px) { .team .container .staffs li { width: 45%; margin: 2.5%; @@ -843,7 +843,7 @@ header .navbar a.cart:hover { .team .container .staffs li:last-child { margin: 0; } -@media (max-width: 450px) { +@media (max-width: 500px) { .team .container .staffs li:last-child { margin: 2.5%; } @@ -853,7 +853,7 @@ header .navbar a.cart:hover { height: 100%; overflow: hidden; } -@media (max-width: 450px) { +@media (max-width: 500px) { .team .container .staffs li .staff-photo img { margin-top: 4rem; } @@ -870,7 +870,7 @@ header .navbar a.cart:hover { background-color: #221543; color: white; } -@media (max-width: 450px) { +@media (max-width: 500px) { .team .container .staffs li .staff-details { bottom: auto; top: 0; @@ -889,7 +889,7 @@ header .navbar a.cart:hover { color: white; transition: bottom 0.5s; } -@media (max-width: 450px) { +@media (max-width: 500px) { .team .container .staffs li .staff-social-media { bottom: 0; padding: 1rem; @@ -934,7 +934,7 @@ header .navbar a.cart:hover { padding-bottom: 0; margin-bottom: 0; } -@media (max-width: 450px) { +@media (max-width: 500px) { .quick-enquiry-form .container .heading-2 { width: 90%; margin-left: 5%; @@ -954,7 +954,7 @@ header .navbar a.cart:hover { display: flex; width: 100%; } -@media (max-width: 450px) { +@media (max-width: 500px) { .quick-enquiry-form .container form { flex-wrap: wrap; justify-content: space-around; @@ -970,7 +970,7 @@ header .navbar a.cart:hover { border: none; font-size: 0.9rem; } -@media (max-width: 450px) { +@media (max-width: 500px) { .quick-enquiry-form .container form select, .quick-enquiry-form .container form input, .quick-enquiry-form .container form button { @@ -1011,7 +1011,7 @@ footer { background-color: #221543; padding: 4% 0; } -@media (max-width: 450px) { +@media (max-width: 500px) { footer { padding: 3rem 0; } @@ -1020,7 +1020,7 @@ footer .container { display: flex; flex-direction: row; } -@media (max-width: 450px) { +@media (max-width: 500px) { footer .container { display: flex; flex-direction: column; @@ -1036,7 +1036,7 @@ footer .container .newsletter { color: white; margin-top: 1rem; } -@media (max-width: 450px) { +@media (max-width: 500px) { footer .container .company-details, footer .container .quick-links, footer .container .recent-news, @@ -1082,7 +1082,7 @@ footer .container .company-details ul li:nth-child(3)::before { footer .container .quick-links { width: 25%; } -@media (max-width: 450px) { +@media (max-width: 500px) { footer .container .quick-links { width: 100%; }