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
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";
}
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices