Image Responsive issue fixed
This commit is contained in:
akash
commit
88fd584273
@ -4,13 +4,15 @@ import ListItem from "@mui/material/List";
|
|||||||
import Collapse from "@mui/material/Collapse";
|
import Collapse from "@mui/material/Collapse";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useTranslation } from 'next-i18next';
|
import { useTranslation } from 'next-i18next';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { changeLanguage } from '../../utils/commonFunction.utils';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const MobileMenu = () => {
|
const MobileMenu = () => {
|
||||||
|
const router = useRouter()
|
||||||
const { t } = useTranslation('menu'); // namespace: "menu.json"
|
const { t } = useTranslation('menu'); // namespace: "menu.json"
|
||||||
const [openId, setOpenId] = useState(0);
|
const [openId, setOpenId] = useState(0);
|
||||||
const [menuActive, setMenuState] = useState(false);
|
const [menuActive, setMenuState] = useState(false);
|
||||||
|
|
||||||
@ -18,6 +20,12 @@ const MobileMenu = () => {
|
|||||||
window.scrollTo(10, 0);
|
window.scrollTo(10, 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const handleLanguageChange = (e) => {
|
||||||
|
const selectedLocale = e.target.value;
|
||||||
|
changeLanguage(router, selectedLocale);
|
||||||
|
};
|
||||||
|
|
||||||
const menus = [
|
const menus = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
@ -70,6 +78,13 @@ const MobileMenu = () => {
|
|||||||
<div className="clox" onClick={() => setMenuState(!menuActive)}><i className="ti-close"></i></div>
|
<div className="clox" onClick={() => setMenuState(!menuActive)}><i className="ti-close"></i></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="language m-2" >
|
||||||
|
<select onChange={handleLanguageChange} value={router.locale} style={{ width: "100%", height: "40px" }}>
|
||||||
|
<option value="es">Spanish</option>
|
||||||
|
<option value="en">English</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
<ul className="responsivemenu">
|
<ul className="responsivemenu">
|
||||||
{menus.map((item, mn) => {
|
{menus.map((item, mn) => {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -92,14 +92,17 @@ const ServiceSectionS2 = () => {
|
|||||||
href={`/services/[slug]`}
|
href={`/services/[slug]`}
|
||||||
as={`/services/${service.slug}`} // Dynamic slug
|
as={`/services/${service.slug}`} // Dynamic slug
|
||||||
>
|
>
|
||||||
{service.sTitle} {/* Service Title */}
|
{service.sTitle.length > 30
|
||||||
|
? service.sTitle.substring(0, 30) + "..."
|
||||||
|
: service.sTitle
|
||||||
|
}
|
||||||
</Link>
|
</Link>
|
||||||
</h2>
|
</h2>
|
||||||
<p
|
<p
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
__html:
|
__html:
|
||||||
service.description.length > 100
|
service.description.length > 80
|
||||||
? service.description.substring(0, 100) + "..."
|
? service.description.substring(0, 80) + "..."
|
||||||
: service.description,
|
: service.description,
|
||||||
}}
|
}}
|
||||||
></p>
|
></p>
|
||||||
|
|||||||
@ -423,7 +423,7 @@
|
|||||||
float: none;
|
float: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wpo-site-header .navbar-right {
|
.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*/
|
/*navbar collaps less then 992px*/
|
||||||
@include media-query (991px) {
|
@include media-query (991px) {
|
||||||
@ -1809,161 +1816,212 @@
|
|||||||
|
|
||||||
|
|
||||||
.mobileMenu {
|
.mobileMenu {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: -300px;
|
left: -300px;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
background: linear-gradient(286.02deg, #080A14 38.02%, #10121E 61.92%, #282A34 74.32%, #404354 90.71%, #343643 99.65%);
|
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;
|
transition: all 0.3s ease 0s;
|
||||||
box-shadow: 0px 10px 40px 0px rgba(50, 50, 50, 0.1);
|
box-shadow: 0px 10px 40px 0px rgba(50, 50, 50, 0.1);
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: scroll;
|
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 {
|
.showmenu {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.responsivemenu {
|
.responsivemenu {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.responsivemenu li a,
|
.responsivemenu li a,
|
||||||
.responsivemenu li p,
|
.responsivemenu li p,
|
||||||
.responsivemenu ul{
|
.responsivemenu ul {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 13px 35px;
|
padding: 13px 35px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.responsivemenu li p{
|
|
||||||
position: relative;
|
.responsivemenu li p {
|
||||||
margin-bottom: 0;
|
position: relative;
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
.responsivemenu ul.subMenu{
|
|
||||||
padding-top: 0;
|
.responsivemenu ul.subMenu {
|
||||||
padding-left: 15px;
|
padding-top: 0;
|
||||||
padding-right: 0;
|
padding-left: 15px;
|
||||||
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
.responsivemenu ul.subMenu ul{
|
|
||||||
position: relative;
|
.responsivemenu ul.subMenu ul {
|
||||||
margin-bottom: 0;
|
position: relative;
|
||||||
padding-left: 0;
|
margin-bottom: 0;
|
||||||
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.responsivemenu ul{
|
|
||||||
list-style: none;
|
.responsivemenu ul {
|
||||||
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.responsivemenu ul p,
|
.responsivemenu ul p,
|
||||||
.responsivemenu ul a{
|
.responsivemenu ul a {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.responsivemenu ul p i{
|
.responsivemenu ul p i {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.responsivemenu .card{
|
.responsivemenu .card {
|
||||||
border:none
|
border: none
|
||||||
}
|
}
|
||||||
.responsivemenu .card-body{
|
|
||||||
padding-top: 0;
|
.responsivemenu .card-body {
|
||||||
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.responsivemenu li a{
|
.responsivemenu li a {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.responsivemenu li i{
|
|
||||||
position: absolute;
|
.responsivemenu li i {
|
||||||
right: 20px;
|
position: absolute;
|
||||||
top: 17px;
|
right: 20px;
|
||||||
|
top: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.showmenu i {
|
.showmenu i {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobileMenu{
|
.mobileMenu {
|
||||||
display: none;
|
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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 {
|
.middle-header-3 .showmenu {
|
||||||
top: 36px;
|
top: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.middle-header2 .showmenu {
|
.middle-header2 .showmenu {
|
||||||
top: 26px;
|
top: 26px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.middle-header-3 .showmenu i{
|
.middle-header-3 .showmenu i {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media(max-width:450px){
|
@media(max-width:450px) {
|
||||||
.mobileMenu {
|
.mobileMenu {
|
||||||
left: -260px;
|
left: -260px;
|
||||||
width: 260px;
|
width: 260px;
|
||||||
}
|
}
|
||||||
.responsivemenu li a, .responsivemenu li p {
|
|
||||||
font-size: 14px;
|
.responsivemenu li a,
|
||||||
padding: 13px 25px;
|
.responsivemenu li p {
|
||||||
}
|
font-size: 14px;
|
||||||
|
padding: 13px 25px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.responsivemenu a:not([href]):not([class]),
|
.responsivemenu a:not([href]):not([class]),
|
||||||
.responsivemenu a:not([href]):not([class]):hover{
|
.responsivemenu a:not([href]):not([class]):hover {
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
}
|
}
|
||||||
@ -1082,6 +1082,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.wpo-campaign-text-top {
|
.wpo-campaign-text-top {
|
||||||
|
min-height: 215px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
padding-top: 22px;
|
padding-top: 22px;
|
||||||
|
|
||||||
|
|||||||
@ -81,12 +81,16 @@
|
|||||||
margin: -1px;
|
margin: -1px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@media(max-width:1199px){
|
@media(max-width:1024px){
|
||||||
padding: 12px;
|
padding: 10px 21px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
@media(max-width:767px){
|
@media(max-width:768px){
|
||||||
padding: 10px;
|
padding: 5px 13px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
@media(max-width:500px){
|
||||||
|
padding: 5px 2px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user