Hi, as you can see in the picture below on the FAQ page I got several drop-downs and each of them has a dropdown icon and they are very much on the edge of the component, and I would like to move them to a bit left side so that way they would have some space to the right side rather than edging with the component.
Any help or sources would be much appreciated!
URL: FAQ – Abbasi (abbasigems.com) (https://abbasigems.com/pages/faq)
PASSWORD: testingpage
Thank you so much!
Hi @Justauser,
This is Victor from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file component-accodion.css.
Step 3: Paste the below code at bottom of the file → Save
summary .icon-caret{right:1rem !important}
Hope my solution works perfectly for you!
Best regards,
Victor | PageFly
@justauser
Hello,
accordion.content-container .icon.icon-caret {
right: 2rem !important;
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid
Like This
Hi @PageFly-Victor thank you for responding and your code worked so smoothly. btw I was wondering if there is any way to make the dropdown transition and background colour change on click and off click in a smooth way, like using the CSS transition property. What do you think?
Hello @justauser
It’s GemPages support team and glad to support you today.
You can follow these steps:
summary .icon-caret {
right: 2rem!important;
}
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
yes, you can use this code
.accordion__content.rte,summary .icon-caret{
transition: all .5s !important
}
Hello @justauser ,
I’ve been struggling to create a decent accordion-style FAQ page.
How did you create yours if you don’t mind me asking?
I’d be grateful if you could share instructions/pieces of code.
Thank you