Making an accordion responsive

[IngridJ]

Hi, 

I bought a template on the marketplace, but the accordion module isn't responsive. Is there code I can use to make it responsive for mobile? The module script is below. Thanks!

________________________________________________________________________________

<div class="accordion">
<div class="accordion_group {% if widget.expand %}expand{% endif %}">
<div class="accordion_header">
{{ widget.header_text }}
</div>
<div class="accordion_text">
{{ widget.accordion_text }}
</div>
</div>
</div>

<style>
@media (max-width: 480px) {
.accordion_header {
font-size: 24px;
line-height: 24px;
text-align: left;

}
}
</style>

<script>
$(document).ready(function() {
var $accordion = $('.accordion');

// Initially hide all accordion content
$accordion.find('.accordion_text').hide();
// Initially display the accordion content with .expand class
$accordion.find('.accordion_group.expand .accordion_text').show();

$accordion.find('.accordion_header').click(function(){

// Hide the displayed sibling accordion content so only one appears at a time
$accordion.find(".accordion_header").not(this).parent(".accordion_group.expand").removeClass('expand').children('.accordion_text').stop(true,true).slideUp();

if(!$(this).parent('.accordion_group').hasClass('expand')){
// Display the accordion content if it is not displayed
$(this).parent(".accordion_group").addClass('expand').children('.accordion_text').stop(true,true).slideDown();
}
else{
// Hide the accordion content if it is displayed
//$(this).parent(".accordion_group").removeClass('expand').children('.accordion_text').stop(true,true).slideUp();
}
});
});
</script>

[absolutions]

Hi,

If you can share live page url that will be much easier to findout actual reason for this and then i can send you a solution for this.

[ChadP]

You caould start by reducing the font size in the accordion tabs.

@media screen and (max-width: 768px) {

    .accordion_header {
        font-size: 16px;
        line-height: 18px;
        font-weight: 700;
    }

}

See where that gets you.