MetatroncubeSoftwareSolutions/janahan-law
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Image Responsive issue fixed

Browse Source
This commit is contained in:
akash 2025-08-19 19:31:45 +05:30
commit 88fd584273
5 changed files with 204 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/MobileMenu/MobileMenu.js
View File

@ -4,12 +4,14 @@ 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 (

9
components/ServiceSectionS2/ServiceSectionS2.js
View File

@ -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>

112
styles/sass/layout/_header.scss
View File

@ -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) {
@ -1821,29 +1828,35 @@
overflow-x: auto; overflow-x: auto;
overflow-y: scroll; overflow-y: scroll;
} }
.responsivemenu .card-body{
.responsivemenu .card-body {
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%);
} }
.mobileMenu h2{
.mobileMenu h2 {
padding-left: 20px; padding-left: 20px;
} }
.mobileMenu.show{
.mobileMenu.show {
left: 0; 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;
@ -1853,64 +1866,74 @@
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
} }
.responsivemenu li p{
.responsivemenu li p {
position: relative; position: relative;
margin-bottom: 0; margin-bottom: 0;
} }
.responsivemenu ul.subMenu{
.responsivemenu ul.subMenu {
padding-top: 0; padding-top: 0;
padding-left: 15px; padding-left: 15px;
padding-right: 0; padding-right: 0;
} }
.responsivemenu ul.subMenu ul{
.responsivemenu ul.subMenu ul {
position: relative; position: relative;
margin-bottom: 0; margin-bottom: 0;
padding-left: 0; padding-left: 0;
} }
.responsivemenu ul{
.responsivemenu ul {
list-style: none; 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{
.responsivemenu .card-body {
padding-top: 0; padding-top: 0;
} }
.responsivemenu li a{ .responsivemenu li a {
position: relative; position: relative;
} }
.responsivemenu li i{
.responsivemenu li i {
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 17px; top: 17px;
} }
.showmenu i { .showmenu i {
font-size: 30px; font-size: 30px;
color: #fff; color: #fff;
} }
.mobileMenu{ .mobileMenu {
display: none; display: none;
} }
.showmenu{
.showmenu {
display: none; display: none;
} }
@media (max-width:992px){
@media (max-width:992px) {
.showmenu { .showmenu {
display: block; display: block;
width: 40px; width: 40px;
@ -1920,11 +1943,12 @@
border-radius: 5px; border-radius: 5px;
} }
.showmenu button:focus{ .showmenu button:focus {
outline: none; outline: none;
box-shadow: none; box-shadow: none;
} }
.showmenu button span{
.showmenu button span {
background-color: #fff; background-color: #fff;
width: 20px; width: 20px;
display: block; display: block;
@ -1932,31 +1956,65 @@
margin: 0 auto; margin: 0 auto;
margin-bottom: 5px; margin-bottom: 5px;
} }
.mobileMenu{
.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; 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 {
.responsivemenu li a,
.responsivemenu li p {
font-size: 14px; font-size: 14px;
padding: 13px 25px; padding: 13px 25px;
} }
@ -1964,6 +2022,6 @@
.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;
} }

1
styles/sass/page/_home-default.scss
View File

@ -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;

12
styles/sass/page/_home-style-4.scss
View File

@ -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;
} }