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 (
<section className="faq-section pt-5">
<div className="auto-container">
<div className="sec-title centred mb_40">
<h2>Frequently Asked Questions</h2>
</div>
<div className="content-box">
<ul className="accordion-box">
{faqData.map((item, index) => (
<li key={index} className="accordion block">
<div
className={isActive === index ? "acc-btn active" : "acc-btn"}
onClick={() => handleToggle(index)}
>
<div className="icon-box"><i className="icon-34"></i></div>
<h5>{item.question}</h5>
<div className="sec-title centred mb_40">
<h2>Frequently Asked Questions</h2>
</div>
<div className="content-box">
<ul className="accordion-box">
{faqData.map((item, index) => (
<li key={index} className="accordion block">
<div
className={isActive === index ? "acc-btn active" : "acc-btn"}
onClick={() => handleToggle(index)}
>
<div className="icon-box"><i className="icon-34"></i></div>
<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 className={isActive === index ? "acc-content current" : "acc-content"}>
<div className="content">
<div className="text"><p>{item.answer}</p></div>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
</li>
))}
</ul>
</div>
</section>
);

View File

@ -251,17 +251,6 @@
/** RESPONSIVE-CSS **/
@media only screen and (max-width: 1200px){
}
@media only screen and (max-width: 991px){
}
@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){
@ -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 {
position: relative;
}
.accordion{
.accordion {
position: relative;
background: #fff;
box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1);
@ -14,14 +13,14 @@
overflow: hidden;
}
.accordion .acc-btn{
.accordion .acc-btn {
position: relative;
padding: 20px 70px 20px 40px;
cursor: pointer;
background: #fff;
}
.accordion .acc-btn h5{
.accordion .acc-btn h5 {
display: block;
font-size: 18px;
line-height: 30px;
@ -32,11 +31,11 @@
background: var(--theme-color);
}
.accordion .acc-btn.active h5{
.accordion .acc-btn.active h5 {
color: #fff;
}
.accordion .acc-btn .icon-box{
.accordion .acc-btn .icon-box {
position: absolute;
display: inline-block;
width: 30px;
@ -51,17 +50,17 @@
right: 40px;
}
.accordion .acc-btn.active .icon-box{
.accordion .acc-btn.active .icon-box {
transform: rotate(180deg);
background: #fff;
border-color: #fff;
}
.accordion .acc-content{
.accordion .acc-content {
padding: 40px;
}
.faq-section .image-layer{
.faq-section .image-layer {
position: absolute;
left: 300px;
bottom: 0px;
@ -79,74 +78,43 @@
/** 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;
}
}
@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{
padding: 190px 0px;
}
.page-title h1{
font-size: 40px;
line-height: 50px;
}
.page-title .bread-crumb li{
position: relative;
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 {
font-size: 22px !important;
line-height: 23px;
font-size: 26px !important;
line-height: 32px;
}
}