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

menu card section responsive issues updated

Browse Source
This commit is contained in:
Alaguraj0361 2025-07-21 21:21:28 +05:30
parent c4f50e7b68
commit 9cb16c71c7
2 changed files with 1026 additions and 1004 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/sections/home3/Fluid.js
View File

@ -16,11 +16,11 @@ export default function Fluid() {
<> <>
{/* Fluid Section Two */} {/* Fluid Section Two */}
<section className="fluid-section-two"> <section className="fluid-section-two">
<div className="section-text">Recipe book</div> {/* <div className="section-text">Recipe book</div> */}
<div className="outer-container clearfix"> <div className="outer-container clearfix row d-flex align-items-center">
{/* Content Column */} {/* Content Column */}
<div className="content-column"> <div className="col-lg-6 content-column">
<div className="inner-column"> <div className="inner-column">
{/* Title Box */} {/* Title Box */}
<div className="title-box"> <div className="title-box">
@ -48,10 +48,15 @@ export default function Fluid() {
</div> </div>
{/* Image Column */} {/* Image Column */}
<div className="image-column" style={{ backgroundImage: `url(${selectedImage})` }}> <div className="col-lg-6">
<figure className="image-box"> <div className="w-100">
<img src={selectedImage} alt="Selected Book" /> <img
</figure> src={selectedImage}
alt="Selected Book"
className="img-fluid rounded shadow"
style={{ width: "100%", height: "auto", objectFit: "cover" }}
/>
</div>
</div> </div>
</div> </div>
</section> </section>

17
public/assets/css/responsive.css
View File

@ -1141,21 +1141,27 @@
h4 { h4 {
font-size: 20px; font-size: 20px;
} }
.juice-section { .juice-section {
padding: 50px 0px; padding: 50px 0px;
} }
.recipe-section-two { .recipe-section-two {
padding: 0px 0px 50px; padding: 0px 0px 50px;
} }
.specials-section { .specials-section {
padding: 50px 0px; padding: 50px 0px;
} }
.menu-page-section { .menu-page-section {
padding: 50px 0px; padding: 50px 0px;
} }
.gallery-section-two { .gallery-section-two {
padding: 0px 0px 50px; padding: 0px 0px 50px;
} }
.banner-section-two .content-column h1 { .banner-section-two .content-column h1 {
font-size: 34px; font-size: 34px;
} }
@ -1259,21 +1265,25 @@
} }
} }
@media only screen and (max-width: 479px) { @media only screen and (max-width: 479px) {
.banner-section .swiper-slide-active .icon-layer-one { .banner-section .swiper-slide-active .icon-layer-one {
max-width: 285px; max-width: 285px;
} }
} }
@media only screen and (max-width: 479px) { @media only screen and (max-width: 479px) {
.banner-section .swiper-slide-active .icon-layer-three { .banner-section .swiper-slide-active .icon-layer-three {
display: none; display: none;
} }
} }
@media only screen and (max-width: 479px) { @media only screen and (max-width: 479px) {
.banner-section .swiper-slide-active .content-column .icons-box { .banner-section .swiper-slide-active .content-column .icons-box {
display: none; display: none;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.main-menu .navbar-collapse { .main-menu .navbar-collapse {
float: none !important; float: none !important;
@ -1291,3 +1301,10 @@
text-align: center; text-align: center;
} }
} }
@media (max-width: 768px) {
.fluid-section-two .content-column .inner-column {
padding: 50px 60px 50px 15px;
}
}