Compare commits

...

5 Commits

Author SHA1 Message Date
a9f655930e img issue corrected 2025-08-19 20:03:55 +05:30
akash
88fd584273 Image Responsive issue fixed 2025-08-19 19:31:45 +05:30
064c8f79a2 header correction updated 2025-08-19 19:20:43 +05:30
akash
c664ebea9d Image Responsive issue fixed 2025-08-19 18:56:54 +05:30
akash
dd083b1934 Image Responsive issue fixed 2025-08-19 18:56:44 +05:30
7 changed files with 231 additions and 145 deletions

View File

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

View File

@ -12,12 +12,12 @@ const OurMission = () => {
<div className="wpo-blog-content">
<div className="post format-standard-image">
<div
className="entry-media"
style={{ width: "100%", height: "auto", overflow: "hidden" }}
>
className="responsive-entry-media" >
<img
src="/images/our-mission/imgg.webp"
alt=""
fill
style={{ objectFit: 'cover' }}
/>
</div>

View File

@ -47,17 +47,14 @@ const BlogSingle = () => {
<div className="col col-lg-12 col-12">
<div className="wpo-blog-content">
<div className={`post ${blogMeta.blClass}`}>
<div className="entry-media">
<div style={{ width: '100%', height: '400px', position: 'relative' }}>
<Image
src={blogMeta.blogSingleImg}
alt={blogContent.title}
fill
style={{ objectFit: 'cover' }}
/>
</div>
<div className="responsive-entry-media">
<Image
src={blogMeta.blogSingleImg}
alt={blogContent.title}
fill
style={{ objectFit: 'cover' }}
/>
</div>
{/* <div className="entry-meta">
<ul>
<li><i className="fi flaticon-calendar"></i> {blogMeta.create_at}</li>

View File

@ -42,16 +42,13 @@ const ServiceDetailsPage = ({ service }) => {
<div className="wpo-blog-content">
<div className="post format-standard-image">
{/* Banner Image */}
<div className="entry-media">
<div style={{ width: "100%", height: "650px", position: "relative" }}>
<Image
src={service.sImgS}
alt={service.sTitle}
fill
style={{ objectFit: "cover" }}
unoptimized
/>
</div>
<div className="responsive-entry-media2">
<Image
src={service.sImgS}
alt={service.sTitle}
fill
style={{ objectFit: 'cover' }}
/>
</div>
<h2 className="mt-4">{service.sTitle}</h2>

View File

@ -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,238 @@
.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;
}
.responsive-entry-media {
position: relative;
width: 100%;
aspect-ratio:28 / 9;
overflow: hidden;
}
.responsive-entry-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.responsive-entry-media2 {
position: relative;
width: 100%;
aspect-ratio:3 / 2;
overflow: hidden;
}
.responsive-entry-media2 img {
width: 100%;
height: 100%;
object-fit: cover;
}

View File

@ -1082,6 +1082,7 @@
}
.wpo-campaign-text-top {
min-height: 215px;
padding: 15px;
padding-top: 22px;

View File

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