Kleo Accordion CSS Issue

[markob17]

Hi, when viewing the Kleo Accordion toggle on smaller responsive resolutions, the + / – icon on the left floats below the title text for some reason (see screenshot). On other themes I used, the + / – icon would stay to the left of the text just like when viewing on larger screens. Any way to fix this? This styling looks bad.

Thanks,

mark

Attachments:

You must be logged in to view attached files.

[rikbutterflyskull]

For 7th’s guys, this is what i was writing about in https://archived.seventhqueen.com/forums/topic/kleo-posts-no-longer-working/#post-109310

[Abe]

Hi, sorry for my late reply. How small is that since it does not seem like a mobile resolution?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[markob17]

Happens on all mobile resolutions. I actually found an existing thread on this support forum that provided a CSS solution that fixes this issue. It is below. However, I believe on that same thread you guys said this css fix would be incorporated into later Kleo updates yet it still occurs, so appears it slipped through the cracks. Maybe something to add to your timeline for the next Kleo update.

COPY CODE

.panel-kleo.icons-to-left .accordion-toggle {position: relative; display: inline-block;	width: 100%; padding-left:30px;}
.panel-kleo.icons-to-left span.icon-closed, .panel-kleo.icons-to-left span.icon-opened {position: absolute; top: 1px; left: 0;}

Regards,
mark

[Abe]

Thanks for sharing. Will do some more tests and make sure that the next update fixes it.

All the best

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[5high-photohub]

@ Abe – the same thing happens when you use a custom/google font for the toggle title, and on normal screen size, so not related to mobile setting.

See attached screenshot.

Anyway to fix this?
Should I use the css above for it?

Thanks, j

Attachments:

You must be logged in to view attached files.

[Author]

Posts