Blog faq and banner text size reduced
This commit is contained in:
parent
887ff8a0a8
commit
71117fbe1a
@ -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>
|
||||
);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -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){
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user