diff --git a/components/ServiceSectionS2/ServiceSectionS2.js b/components/ServiceSectionS2/ServiceSectionS2.js index a6e11bb..d34edc4 100644 --- a/components/ServiceSectionS2/ServiceSectionS2.js +++ b/components/ServiceSectionS2/ServiceSectionS2.js @@ -92,14 +92,17 @@ const ServiceSectionS2 = () => { href={`/services/[slug]`} as={`/services/${service.slug}`} // Dynamic slug > - {service.sTitle} {/* Service Title */} + {service.sTitle.length > 30 + ? service.sTitle.substring(0, 30) + "..." + : service.sTitle + }

100 - ? service.description.substring(0, 100) + "..." + service.description.length > 80 + ? service.description.substring(0, 80) + "..." : service.description, }} >

diff --git a/styles/sass/layout/_header.scss b/styles/sass/layout/_header.scss index 31b7a83..18425d4 100644 --- a/styles/sass/layout/_header.scss +++ b/styles/sass/layout/_header.scss @@ -423,7 +423,7 @@ float: none; position: relative; z-index: 99; - text-align: center; + // text-align: center; } .wpo-site-header .navbar-right { @@ -1328,6 +1328,13 @@ } } + @media (max-width: 768px) { + .navbar-header .navbar-brand img { + max-width: 220px; + width: auto; + height: auto; + } + } /*navbar collaps less then 992px*/ @include media-query (991px) { @@ -1809,161 +1816,212 @@ .mobileMenu { - position: fixed; - left: -300px; - top: 0; - z-index: 9999; - height: 100vh; - width: 300px; - background: linear-gradient(286.02deg, #080A14 38.02%, #10121E 61.92%, #282A34 74.32%, #404354 90.71%, #343643 99.65%); - transition: all 0.3s ease 0s; - box-shadow: 0px 10px 40px 0px rgba(50, 50, 50, 0.1); - overflow-x: auto; - overflow-y: scroll; + position: fixed; + left: -300px; + top: 0; + z-index: 9999; + height: 100vh; + width: 300px; + background: linear-gradient(286.02deg, #080A14 38.02%, #10121E 61.92%, #282A34 74.32%, #404354 90.71%, #343643 99.65%); + transition: all 0.3s ease 0s; + box-shadow: 0px 10px 40px 0px rgba(50, 50, 50, 0.1); + overflow-x: auto; + overflow-y: scroll; } -.responsivemenu .card-body{ - background: linear-gradient(286.02deg, #080A14 38.02%, #10121E 61.92%, #282A34 74.32%, #404354 90.71%, #343643 99.65%); + +.responsivemenu .card-body { + background: linear-gradient(286.02deg, #080A14 38.02%, #10121E 61.92%, #282A34 74.32%, #404354 90.71%, #343643 99.65%); } -.mobileMenu h2{ - padding-left: 20px; + +.mobileMenu h2 { + padding-left: 20px; } -.mobileMenu.show{ - left: 0; + +.mobileMenu.show { + left: 0; } + .showmenu { - position: relative; - top: 0; - z-index: 999; - cursor: pointer; + position: relative; + top: 0; + z-index: 999; + cursor: pointer; } + .responsivemenu { - list-style: none; - padding-left: 0; - padding-top: 10px; + list-style: none; + padding-left: 0; + padding-top: 10px; } + .responsivemenu li a, .responsivemenu li p, -.responsivemenu ul{ - display: block; - padding: 13px 35px; - font-size: 16px; - letter-spacing: 0; - text-transform: capitalize; - font-weight: 500; - color: #fff; - cursor: pointer; +.responsivemenu ul { + display: block; + padding: 13px 35px; + font-size: 16px; + letter-spacing: 0; + text-transform: capitalize; + font-weight: 500; + color: #fff; + cursor: pointer; } -.responsivemenu li p{ - position: relative; - margin-bottom: 0; + +.responsivemenu li p { + position: relative; + margin-bottom: 0; } -.responsivemenu ul.subMenu{ - padding-top: 0; - padding-left: 15px; - padding-right: 0; + +.responsivemenu ul.subMenu { + padding-top: 0; + padding-left: 15px; + padding-right: 0; } -.responsivemenu ul.subMenu ul{ - position: relative; - margin-bottom: 0; - padding-left: 0; + +.responsivemenu ul.subMenu ul { + position: relative; + margin-bottom: 0; + padding-left: 0; } -.responsivemenu ul{ - list-style: none; + +.responsivemenu ul { + list-style: none; } + .responsivemenu ul p, -.responsivemenu ul a{ - color: #fff; - position: relative; - font-size: 16px; +.responsivemenu ul a { + color: #fff; + position: relative; + font-size: 16px; } -.responsivemenu ul p i{ - position: absolute; - right: 0; - top: 5px; +.responsivemenu ul p i { + position: absolute; + right: 0; + top: 5px; } -.responsivemenu .card{ - border:none +.responsivemenu .card { + border: none } -.responsivemenu .card-body{ - padding-top: 0; + +.responsivemenu .card-body { + padding-top: 0; } -.responsivemenu li a{ - position: relative; +.responsivemenu li a { + position: relative; } -.responsivemenu li i{ - position: absolute; - right: 20px; - top: 17px; + +.responsivemenu li i { + position: absolute; + right: 20px; + top: 17px; } + .showmenu i { - font-size: 30px; - color: #fff; + font-size: 30px; + color: #fff; } -.mobileMenu{ - display: none; -} -.showmenu{ - display: none; -} -@media (max-width:992px){ - .showmenu { - display: block; - width: 40px; - height: 36px; - text-align: center; - line-height: 40px; - border-radius: 5px; - } - - .showmenu button:focus{ - outline: none; - box-shadow: none; - } - .showmenu button span{ - background-color: #fff; - width: 20px; - display: block; - height: 2px; - margin: 0 auto; - margin-bottom: 5px; - } - .mobileMenu{ - display: block; - } +.mobileMenu { + display: none; } +.showmenu { + display: none; +} + +@media (max-width:992px) { + .showmenu { + display: block; + width: 40px; + height: 36px; + text-align: center; + line-height: 40px; + border-radius: 5px; + } + + .showmenu button:focus { + outline: none; + box-shadow: none; + } + + .showmenu button span { + background-color: #fff; + width: 20px; + display: block; + height: 2px; + margin: 0 auto; + margin-bottom: 5px; + } + + .mobileMenu { + display: block; + } +} + +@media (max-width: 768px) { + .header-container { + position: relative; + display: flex; + align-items: center; + padding: 0 15px; + } + + .showmenu { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + display: block; + width: 40px; + height: 36px; + margin-right: 30px; + text-align: center; + line-height: 40px; + border-radius: 5px; + } + + .showmenu button span { + width: 20px; + height: 2px; + margin: 0 auto 5px auto; + background-color: #fff; + display: block; + } +} .middle-header-3 .showmenu { - top: 36px; + top: 36px; } + .middle-header2 .showmenu { - top: 26px; + top: 26px; } -.middle-header-3 .showmenu i{ - color: #fff; +.middle-header-3 .showmenu i { + color: #fff; } -@media(max-width:450px){ - .mobileMenu { - left: -260px; - width: 260px; - } - .responsivemenu li a, .responsivemenu li p { - font-size: 14px; - padding: 13px 25px; - } +@media(max-width:450px) { + .mobileMenu { + left: -260px; + width: 260px; + } + + .responsivemenu li a, + .responsivemenu li p { + font-size: 14px; + padding: 13px 25px; + } } -.responsivemenu a:not([href]):not([class]), -.responsivemenu a:not([href]):not([class]):hover{ - color: #ddd; +.responsivemenu a:not([href]):not([class]), +.responsivemenu a:not([href]):not([class]):hover { + color: #ddd; } \ No newline at end of file diff --git a/styles/sass/page/_home-default.scss b/styles/sass/page/_home-default.scss index ad31bbf..edace6d 100644 --- a/styles/sass/page/_home-default.scss +++ b/styles/sass/page/_home-default.scss @@ -1082,6 +1082,7 @@ } .wpo-campaign-text-top { + min-height: 215px; padding: 15px; padding-top: 22px; diff --git a/styles/sass/page/_home-style-4.scss b/styles/sass/page/_home-style-4.scss index e3f548a..48bdf87 100644 --- a/styles/sass/page/_home-style-4.scss +++ b/styles/sass/page/_home-style-4.scss @@ -81,12 +81,16 @@ margin: -1px; cursor: pointer; - @media(max-width:1199px){ - padding: 12px; + @media(max-width:1024px){ + padding: 10px 21px; font-size: 18px; } - @media(max-width:767px){ - padding: 10px; + @media(max-width:768px){ + padding: 5px 13px; + font-size: 14px; + } + @media(max-width:500px){ + padding: 5px 2px; font-size: 14px; }