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

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

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