How can I decrease line spacing on my FAQ page?

Store Design
1

houssamalissa_0-1629383408759.png
houssamalissa_0-1629383408759.png1326×802 50.7 KB

Hi guys,

Can anyone tell me how to reduce the gaps on my FAQ page

  • Between the Headers and the questions
  • Between the questions and the answers
  • Between one section and another?

Think the white space is a bit ugly.

Also, bonus points if anyone can tell me how to make the sections collapsible.

Thanks! :slightly_smiling_face:

1 Like
2

Hi!
Add the rules to the bottom of theme.css

/* Margin- FAQ header */
.grid__item.medium-up--three-quarters.medium-up--push-one-eighth .section-header{
margin-bottom: 0px;
}

/* Margins- h2*/
.index-section.index-section--faq {
  margin-top:20px;
  margin-bottom:0px;
}

/* Margins- b/w h2 & answers */
.index-section.index-section--faq .h2{
margin-bottom: 0px;
}

Result:

2021-08-19 11_08_35.png
2021-08-19 11_08_35.png898×754 38.9 KB

  1. To make sections collapsable would require code customization , for this task, it’s best to reach out to https://experts.shopify.com/
1 Like
3

@houssamalissa

Please add the code at the bottom of your assets/theme.css file.

@media only screen and (min-width: 590px){
#shopify-section-page-faq-template .h2, #shopify-section-page-faq-template h2{ margin: 0 0 10px !important; }
#shopify-section-page-faq-template .index-section--faq { margin: 20px 0 0px !important; }
}

Hope this works.

Thanks!

1 Like
4

Hi guys,

Both these codes make things look a lot better, thank you!! However what still remains is the very large gap between the bottom of the text and the top of the next question:

houssamalissa_0-1629395895559.png
houssamalissa_0-1629395895559.png1131×517 22.2 KB

Do you know what line I can add in to fix that?

5

You could try adding this rule

.rte.collapsible-content__inner--faq{
  padding-bottom: 0 !important;
}

Also, you need to manually remove the redundant
elements on some of the answers. Those are adding extra space.

2021-08-19 16_00_25.png
2021-08-19 16_00_25.png2029×367 34.2 KB

1 Like
6

Thanks!!

1 Like
7

Good to hear that the issue is solved!

1 Like