Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 26, 2022 at 1:59 am #1346096
    ihf-eramstad

    I’d like to style the font in an Accordion toggle element so that it’s styled like a Special Heading element (h2 setting). Is this possible?

    March 26, 2022 at 7:47 pm #1346142
    Rikard

    Hey ihf-eramstad,

    Could you post links to where we can see both elements on your site please?

    Best regards,
    Rikard

    March 28, 2022 at 6:48 pm #1346342
    ihf-eramstad

    Hi Rikard – Please refer to private content

    March 30, 2022 at 10:00 am #1346535
    Rikard

    Hi,

    Thanks for that. Please try this in Quick CSS:

    p.toggler b {
    font-family: 'Raleway';
    font-weight: 700;
    font-size: 32px;
    line-height: 35px;
}

    Best regards,
    Rikard

    March 30, 2022 at 7:52 pm #1346647
    ihf-eramstad

    Thank you – I ended up applying the following:

    .av_toggle_section.av-l16wj3qo-5496a02af53b84abb64c0b59e414e6f7 {
    font-family: ‘Raleway’;
    font-weight: 700;
    font-size: 26px;
    text-align: center;
    line-height: 35px; !important
    }

    However, this makes the toggle appear on the left side of the container. My addition of “text-align” only controls the title.

    I would like the toggle in the center of its parent container, with the “+” character directly to the left of the toggle label. Is this possible?

    March 30, 2022 at 9:04 pm #1346656
    ihf-eramstad

    Please disregard the above. I have a solution. Thanks for your help.

    March 30, 2022 at 11:35 pm #1346663
    ihf-eramstad

    Sorry – one more question. I’d like to center the accordion element in its parent container, but the accordion element does not offer an option for this.

    March 31, 2022 at 7:14 am #1346700
    Ismael

    Hi,

    Thank you for the update.

    Have you tried using the column elements to center align another element? You can place three 1/3 columns in the same row and move the accordion element in the middle column. If you need more space for the toggle element, try to instead use a 3/5 column and add two 1/5 column on each side.

    Best regards,
    Ismael

    April 1, 2022 at 2:59 am #1346788
    ihf-eramstad

    Hi Ismael – yes, thanks. That is my solution for now. Sometimes the alignment is not quite right with that technique. it also forces unwanted text wrapping when a page width is reduced, due to the 1/5 (narrow) column. it would be best to have a center option for that element, so it can be placed centered within a larger column size.

    • This reply was modified 2 years, 9 months ago by ihf-eramstad.
    April 1, 2022 at 1:15 pm #1346870
    Ismael

    Hi,

    Thank you for the update.

    You can place the toggle element in a 1/1 column element and use this css code to align it to the center of the column container.

    .flex_column .togglecontainer {
    width: 80%;
    margin: 0 auto;
}

    You may need to apply a custom css class name or ID to the column or the toggle element.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.