Font Awesome accordion arrows jump on mobile

[kineticcreative123]

Hi everyone,

I have an accordion I built which works great but the arrows are dropping on mobile devices. Is there a way to get them to stay on the first line of text? Below is a link and screenshot of what I'm seeing.

Thank you

Slide Panels

[osgood_ · Accepted solution]

Change to 'before' instead of 'after' and comment out both of the float: left; (as below). See if that gets you to where you want to be.

.accordion h3:before {

/*float: left;*/

content: '\f105';

color: #0091b3;

font-weight: bold;

    font-family: "FontAwesome";

font-size: 30px;

    line-height:25px;

    padding: 0px 15px 0px 10px;

}

.active h3:before {

/*float: left;*/

content: "\f107";

color: #0091b3;

font-weight: bold;

font-size: 30px;

    font-family: "FontAwesome";

    padding: 0px 15px 0px 10px;

}

You dont need all of the 'repeat' attributes - you can just use:

.accordion h3:before {

content: '\f105';

color: #0091b3;

font-weight: bold;

font-family: "FontAwesome";

font-size: 30px;

line-height:25px;

padding: 0px 15px 0px 10px;

}

.active h3:before {

content: "\f107";

}

[kineticcreative123]

Thanks osgood!!! Thank worked perfectly. Have a great day!