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 Link from "next/link";
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useRouter } from 'next/router';
|
||||
import { changeLanguage } from '../../utils/commonFunction.utils';
|
||||
|
||||
|
||||
|
||||
|
||||
const MobileMenu = () => {
|
||||
|
||||
const { t } = useTranslation('menu'); // namespace: "menu.json"
|
||||
const router = useRouter()
|
||||
const { t } = useTranslation('menu'); // namespace: "menu.json"
|
||||
const [openId, setOpenId] = useState(0);
|
||||
const [menuActive, setMenuState] = useState(false);
|
||||
|
||||
@ -18,6 +20,12 @@ const MobileMenu = () => {
|
||||
window.scrollTo(10, 0);
|
||||
};
|
||||
|
||||
|
||||
const handleLanguageChange = (e) => {
|
||||
const selectedLocale = e.target.value;
|
||||
changeLanguage(router, selectedLocale);
|
||||
};
|
||||
|
||||
const menus = [
|
||||
{
|
||||
id: 1,
|
||||
@ -70,6 +78,13 @@ const MobileMenu = () => {
|
||||
<div className="clox" onClick={() => setMenuState(!menuActive)}><i className="ti-close"></i></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">
|
||||
{menus.map((item, mn) => {
|
||||
return (
|
||||
|
||||
@ -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
|
||||
}
|
||||
</Link>
|
||||
</h2>
|
||||
<p
|
||||
dangerouslySetInnerHTML={{
|
||||
__html:
|
||||
service.description.length > 100
|
||||
? service.description.substring(0, 100) + "..."
|
||||
service.description.length > 80
|
||||
? service.description.substring(0, 80) + "..."
|
||||
: service.description,
|
||||
}}
|
||||
></p>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -1082,6 +1082,7 @@
|
||||
}
|
||||
|
||||
.wpo-campaign-text-top {
|
||||
min-height: 215px;
|
||||
padding: 15px;
|
||||
padding-top: 22px;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user