Alligning text in accordion block

Hi all, 

On my website I would like to add a list of information in an accordion element. I would like it to look like following example (made in word) where each topic is answered, but where the answers are indented so they are all aligned. If the answers outrun the length of the text line I would like that the second line is aligned to the rest of the answers. 

To achieve this i already went though a number of steps. First I made the topic titles bold in the squarespace interface to be able to adress them in code, and added this code in CSS: 

.accordion-item__description strong {
    font-weight: normal;
    display: inline-block;
    width: 150pt;
}

This works in indenting the answers buy a fixed amount, but the problem is that the second line of the anwers jumps back to the front of the line instead of the indent. 

The second thing I tried, together with the above was making the answers italic in the squarespace interface (to be able to adress them in code) and applying this code in CSS:

.accordion-item__description em {
    font-style: normal;
      position: absolute;
      padding-left: 0pt; 
}

This is  was succesfull in also aligning the second lines of the answer, but it created two additional problems: 

- text start to overlap (when there are multiple two line answers)
- the text starts to overrun the accordion dividers. 

Does anyone know how to solve this issue? 

Here is the webpage URL where I have been testing: https://www.fallow.eu/work/tilefactory-1

Thanks in advance!

On 11/8/2023 at 1:49 AM, Matthias39682 said:

Hi all, 

On my website I would like to add a list of information in an accordion element. I would like it to look like following example (made in word) where each topic is answered, but where the answers are indented so they are all aligned. If the answers outrun the length of the text line I would like that the second line is aligned to the rest of the answers. 

 

To achieve this i already went though a number of steps. First I made the topic titles bold in the squarespace interface to be able to adress them in code, and added this code in CSS: 

.accordion-item__description strong {
    font-weight: normal;
    display: inline-block;
    width: 150pt;
}

This works in indenting the answers buy a fixed amount, but the problem is that the second line of the anwers jumps back to the front of the line instead of the indent. 

 

The second thing I tried, together with the above was making the answers italic in the squarespace interface (to be able to adress them in code) and applying this code in CSS:

.accordion-item__description em {
    font-style: normal;
      position: absolute;
      padding-left: 0pt; 
}

This is  was succesfull in also aligning the second lines of the answer, but it created two additional problems: 

- text start to overlap (when there are multiple two line answers)
- the text starts to overrun the accordion dividers. 

 

 

Does anyone know how to solve this issue? 

Here is the webpage URL where I have been testing: https://www.fallow.eu/work/tilefactory-1

Thanks in advance!

 

You can consider use flex instead of position absolute

The page doesn't work. Can you check it again?