Blog faq and banner text size reduced

This commit is contained in:
akash 2025-10-16 17:59:47 +05:30
parent 887ff8a0a8
commit 71117fbe1a
5 changed files with 93 additions and 162 deletions

View File

@ -11,30 +11,29 @@ export default function FaqSection({ faqData }) {
return ( return (
<section className="faq-section pt-5"> <section className="faq-section pt-5">
<div className="auto-container">
<div className="sec-title centred mb_40"> <div className="sec-title centred mb_40">
<h2>Frequently Asked Questions</h2> <h2>Frequently Asked Questions</h2>
</div> </div>
<div className="content-box"> <div className="content-box">
<ul className="accordion-box"> <ul className="accordion-box">
{faqData.map((item, index) => ( {faqData.map((item, index) => (
<li key={index} className="accordion block"> <li key={index} className="accordion block">
<div <div
className={isActive === index ? "acc-btn active" : "acc-btn"} className={isActive === index ? "acc-btn active" : "acc-btn"}
onClick={() => handleToggle(index)} onClick={() => handleToggle(index)}
> >
<div className="icon-box"><i className="icon-34"></i></div> <div className="icon-box"><i className="icon-34"></i></div>
<h5>{item.question}</h5> <h5>{item.question}</h5>
</div>
<div className={isActive === index ? "acc-content current" : "acc-content"}>
<div className="content">
<div className="text"><p>{item.answer}</p></div>
</div> </div>
<div className={isActive === index ? "acc-content current" : "acc-content"}> </div>
<div className="content"> </li>
<div className="text"><p>{item.answer}</p></div> ))}
</div> </ul>
</div>
</li>
))}
</ul>
</div>
</div> </div>
</section> </section>
); );

View File

@ -251,17 +251,6 @@
/** RESPONSIVE-CSS **/ /** RESPONSIVE-CSS **/
@media only screen and (max-width: 1200px){
}
@media only screen and (max-width: 991px){
}
@media only screen and (max-width: 767px){ @media only screen and (max-width: 767px){
@ -283,9 +272,6 @@
} }
@media only screen and (max-width: 599px){
}
@media only screen and (max-width: 499px){ @media only screen and (max-width: 499px){
@ -307,46 +293,22 @@
} }
} }
@media only screen and (max-width: 426px) and (min-width: 200px) {
.blog-details-content blockquote p{
font-size: 18px !important;
line-height: 34px;
font-style: italic;
margin-bottom: 20px;
}
.blog-details-content blockquote h4{
display: block;
font-size: 18px !important;
line-height: 32px;
font-weight: 500;
margin-bottom: 5px;
}
}

View File

@ -1,11 +1,10 @@
/** faq-section **/ /** faq-section **/
.faq-section{ .faq-section {
position: relative; position: relative;
} }
.accordion{ .accordion {
position: relative; position: relative;
background: #fff; background: #fff;
box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1);
@ -14,14 +13,14 @@
overflow: hidden; overflow: hidden;
} }
.accordion .acc-btn{ .accordion .acc-btn {
position: relative; position: relative;
padding: 20px 70px 20px 40px; padding: 20px 70px 20px 40px;
cursor: pointer; cursor: pointer;
background: #fff; background: #fff;
} }
.accordion .acc-btn h5{ .accordion .acc-btn h5 {
display: block; display: block;
font-size: 18px; font-size: 18px;
line-height: 30px; line-height: 30px;
@ -32,11 +31,11 @@
background: var(--theme-color); background: var(--theme-color);
} }
.accordion .acc-btn.active h5{ .accordion .acc-btn.active h5 {
color: #fff; color: #fff;
} }
.accordion .acc-btn .icon-box{ .accordion .acc-btn .icon-box {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
width: 30px; width: 30px;
@ -51,17 +50,17 @@
right: 40px; right: 40px;
} }
.accordion .acc-btn.active .icon-box{ .accordion .acc-btn.active .icon-box {
transform: rotate(180deg); transform: rotate(180deg);
background: #fff; background: #fff;
border-color: #fff; border-color: #fff;
} }
.accordion .acc-content{ .accordion .acc-content {
padding: 40px; padding: 40px;
} }
.faq-section .image-layer{ .faq-section .image-layer {
position: absolute; position: absolute;
left: 300px; left: 300px;
bottom: 0px; bottom: 0px;
@ -79,74 +78,43 @@
/** RESPONSIVE-CSS **/ /** RESPONSIVE-CSS **/
@media only screen and (max-width: 1200px){ @media only screen and (max-width: 1200px) {
.faq-section .image-layer{ .faq-section .image-layer {
display: none; display: none;
} }
} }
@media only screen and (max-width: 991px){ @media only screen and (max-width: 426px) and (min-width: 200px) {
.accordion .acc-btn .icon-box {
position: absolute;
display: inline-block;
width: 24px;
line-height: 24px;
line-height: 24px;
font-size: 10px;
color: var(--title-color);
border: 1px solid rgba(103, 103, 103, 1);
border-radius: 50%;
text-align: center;
top: 20px;
right: 2px !important;
}
.accordion .acc-btn h5 {
display: block;
font-size: 16px !important;
line-height: 30px;
font-weight: 600;
} }
@media only screen and (max-width: 767px){ .accordion .acc-btn {
position: relative;
padding: 20px 20px 20px 20px !important;
cursor: pointer;
background: #fff;
} }
@media only screen and (max-width: 599px){
} }
@media only screen and (max-width: 499px){
}

View File

@ -111,26 +111,27 @@
} }
@media only screen and (max-width: 767px){ @media only screen and (max-width: 768px) and (min-width:200px){
.page-title h1{
font-size: 26px !important;
line-height: 36px;
}
.page-title{ .page-title{
padding: 190px 0px; padding: 190px 0px;
} }
.page-title h1{ .page-title .bread-crumb li{
font-size: 40px; position: relative;
line-height: 50px; display: inline-block;
} font-size: 20px !important;
line-height: 32px;
color: #fff;
font-weight: 500;
padding-right: 21px;
margin-right: 3px;
} }
@media only screen and (max-width: 599px){
}
@media only screen and (max-width: 499px){
} }
@ -176,5 +177,6 @@

View File

@ -3654,10 +3654,10 @@
} }
} }
@media (max-width: 425px) { @media (max-width: 426px) and (min-width: 200px) {
.blog-details-content .news-block-one .inner-box .lower-content h2 { .blog-details-content .news-block-one .inner-box .lower-content h2 {
font-size: 22px !important; font-size: 26px !important;
line-height: 23px; line-height: 32px;
} }
} }