junger Posted June 9, 2022 Posted June 9, 2022 (edited) Site URL: https://bluebird-ferret-emn3.squarespace.com/en/about Hello, The page I am working on is https://bluebird-ferret-emn3.squarespace.com/en/about pw: plena When the text wraps, the accordion container takes up 100% width of the space so it does not align with the text. Is there any way to keep the plus icon next to the text the way it does before it wraps? You can see in the last brown accordion item where the alignment issue is. I used the following code to get it to display to the right of the text. .accordion-item__click-target { width:auto !important; Thanks in advance Edited June 10, 2022 by junger
Solution jpeter Posted June 10, 2022 Solution Posted June 10, 2022 (edited) @junger You can try this css: /* Use ::after pseudo-element and a "+" character to display next to text */ #block-yui_3_17_2_1_1654209124778_2884 .accordion-item__title:after { content: '+'; display: inline-block; font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 100; font-size: 5rem; vertical-align: text-top; } /* Update icon to a "–" when accordion expanded */ #block-yui_3_17_2_1_1654209124778_2884 [aria-expanded="true"] .accordion-item__title:after { content: '–'; } /* Hide default icon */ #block-yui_3_17_2_1_1654209124778_2884 .accordion-icon-container { display: none; } Here's what it looks like on my end: Edited June 10, 2022 by jpeter junger 1 Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment