Change width of accordion

[jamesdeandigital]

I’ve done some customisation to my site to include an accordion displaying Woocommerce product attributes below the short product description. Unfortunately, they are running off of the page, and I cannot find the appropriate CSS to reign it back in. Could you help point me in the correct direction?

At the moment, this is being done on a local dev machine, and not live anywhere. However, I have posted the code that I’ve included in my template below, and attached a screenshot of the behaviour.

Thanks in advance

<?php
$fabricvalues = get_the_terms( $product->id, 'pa_fabric');
$carevalues = get_the_terms( $product->id, 'pa_product-care');
?>

<section  class="container"><div class="row">
<div class="spb_accordion spb_content_element" data-active="">
<div class="spb_wrapper spb-asset-content spb_accordion_wrapper ">
<div class="spb_accordion_section group">
<h4><a href="#fabric" id="fabric">Fabric</a></h4>
<div class="row-fluid">
<section  class="container"><div class="row">
<div class="spb_content_elementspb_text_column">

<?php
foreach ( $fabricvalues as $fabricvalue ) {
echo $fabricvalue->name;
} ?>

</div>
</div>
</div>
</div>
</div>
</div>

<section  class="container"><div class="row">
<div class="spb_accordion spb_content_element" data-active="">
<div class="spb_wrapper spb-asset-content spb_accordion_wrapper ">
<div class="spb_accordion_section group">
<h4><a href="#care" id="fabric">Product Care</a></h4>
<div class="row-fluid">
<section class="container"><div class="row">
<div class="spb_content_elementspb_text_column">

<?php
foreach ( $carevalues as $carevalue ) {
echo $carevalue->name;
} ?>

</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.spb_accordion_wrapper{
width:100% !important;
}

Thanks
Mohammad

[jamesdeandigital]

Thanks Mohammad

I was able to constrain it using:

.spb_accordion_wrapper{
width:400px!important;
}

However something is still causing the page to scroll horizontally as if the width had not been set – please see attached screenshot.

Thanks again

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
I am not sure about it. I need live website url to check and resolve the issue.
Thanks
Mohammad

[jamesdeandigital]

This reply has been marked as private.

[JackV]

It seems like you have something inside one of the accordion content areas thats forcing the parent element to stretch.
Look at the code/html of what you have in each accordion item – The theme does not support other shortcodes inside of accordions or tabs very well.

[Mohammad – SUPPORT]

Hi,

@JackV – Great thanks to your suggestion.
Mohammad