how do i make the collapsible rows on shopify product page take up the whole page width?

[Fightingfatigue]

how do i make the collapsible rows on shopify product page take up the whole page width? 

I am using metafields in collapsible rows for the product descriptions and they are only on the right hand side of the page and I would like them to take up the whole width please. 

I have tried loads of different things, but nothing seems to work. 

Please advise. 

When I inspect the page, this is the code that I am getting. 

<div class="product__accordion accordion quick-add-hidden">
<details id="Details-collapsible_tab_Hibnci-template--20959292457295__main">
<summary role="button" aria-expanded="false" aria-controls="ProductAccordion-collapsible_tab_Hibnci-template--20959292457295__main">
<div class="summary__title">
<svg class="icon icon-accordion" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M6.31104 9.13574C6.31104 8.99767 6.42296 8.88574 6.56104 8.88574H13.7464C13.8844 8.88574 13.9964 8.99767 13.9964 9.13574C13.9964 9.27381 13.8844 9.38574 13.7464 9.38574H6.56104C6.42296 9.38574 6.31104 9.27381 6.31104 9.13574Z"></path>
<path d="M6.31104 14.0544C6.31104 13.9164 6.42296 13.8044 6.56104 13.8044H13.439C13.577 13.8044 13.689 13.9164 13.689 14.0544C13.689 14.1925 13.577 14.3044 13.439 14.3044H6.56104C6.42296 14.3044 6.31104 14.1925 6.31104 14.0544Z"></path>
<path d="M6.92587 11.5952C6.92587 11.4571 7.0378 11.3452 7.17587 11.3452H12.8241C12.9622 11.3452 13.0741 11.4571 13.0741 11.5952C13.0741 11.7333 12.9622 11.8452 12.8241 11.8452H7.17587C7.0378 11.8452 6.92587 11.7333 6.92587 11.5952Z"></path>
<path d="M5.19623 1.77832C5.19623 0.949892 5.8678 0.27832 6.69623 0.27832H13.3038C14.1322 0.27832 14.8038 0.949893 14.8038 1.77832V3.46728C14.8038 4.29571 14.1322 4.96728 13.3038 4.96728H6.69623C5.8678 4.96728 5.19623 4.29571 5.19623 3.46728V1.77832ZM6.69623 1.27832C6.42009 1.27832 6.19623 1.50218 6.19623 1.77832V3.46728C6.19623 3.74342 6.42009 3.96728 6.69623 3.96728H13.3038C13.5799 3.96728 13.8038 3.74342 13.8038 3.46728V1.77832C13.8038 1.50218 13.5799 1.27832 13.3038 1.27832H6.69623Z"></path>
<path d="M3.73691 2.50806V18.7232H16.2631V2.50806H14.4981V1.50806H16.2631C16.8154 1.50806 17.2631 1.95577 17.2631 2.50806V18.7232C17.2631 19.2755 16.8154 19.7232 16.2631 19.7232H3.73691C3.18462 19.7232 2.73691 19.2755 2.73691 18.7232V2.50806C2.73691 1.95577 3.18462 1.50806 3.73691 1.50806H5.75974V2.50806L3.73691 2.50806Z"></path></svg>
<h2 class="h4 accordion__title inline-richtext">
Product Description
</h2>
</div>
<svg aria-hidden="true" focusable="false" class="icon icon-caret" viewBox="0 0 10 6">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
</path></svg>

</summary>
<div class="accordion__content rte" id="ProductAccordion-collapsible_tab_Hibnci-template--20959292457295__main">

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

[Vinsinfo]

@Fightingfatigue Please follow the below steps to make the collapsible rows to take whole page width in product page. Let me know whether it is helpful for you.

1. From admin, Go to "Online Store" -> "Themes".

2. Click "Customize" button in the current theme.

3. Go to the product page and select "Add section" in the product template like in the below attached screenshot.

4. Select "Collapsible content" option from dropdown to add. Then, drag and place the section as per your need like below the "Product information" section.

5. You can change the section heading and add description by clicking on the "Collapsible content".

6. Then, click on the "Collapsible row" to add the description.

7. To add your metafield, click the "Connect dynamic source" icon near the "Row content" field like in the below attached screenshot.

8. Click the "Row content from page" dropdown and select "Product". This is the important step to follow. Check whether you have selected "Product" from the dropdown.

9. Now, search the your metafield which is created for adding product description and select it to display.

10. You can remove the unwanted "collapsible row" by deleting it like in the below attached screenshot.

11. Now, the metafield value will be displayed in full width.

If this solution doesn't suits your need, please share your store URL and password to check on this.

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[Fightingfatigue]

@Vinsinfo Thank you very much for your detailed response. But this did not answer the question.

I know how to add the collapsible content and I also have already added the metafield, so that is not my issue.

My issue is that the collapsible rows, they are only on the right hand side of the page and I would like them to take up the whole width please. 

Any advice? I believe I need some code change in the theme editorz but I can't work it out.

Something which will change the width, but it doesn't seem to work..

I am not sure where exactly in the editor I need to add the code and I am also not 100% sure what the class is.

Can someone please give me the code needed 

Thank you very much 

[Vinsinfo]

@Fightingfatigue Can you please share your store URL? So that, we can check and provide you the exact solution.

[Fightingfatigue]

Here is a screenshot of what I mean- 

 

and the inspect code of this, is in the original comment.

[Vinsinfo · Accepted solution]

@Fightingfatigue We understood that you are looking to display the collapsible row in wider length, so please delete the existing "Collapsible row" block under "Product information" section, instead add it as a new section using the steps mentioned in our first comment. So, it will display wider like below screenshot.

Delete "Collapsible row":

     

Add "Collapsible content":

If you want to display more wider than the added "Collapsible content", add below code in the "Custom CSS" field to the "Collapsible content" section.

.collapsible-content-wrapper-narrow {
    max-width: 80% !important;
}

It will look like below,

Please let me know whether it works for you.

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[Fightingfatigue]

@Vinsinfo Thank you. I will try this..

Is there no CSS code just for the collapsible rows? 

What is the advantage of adding the collapsible content??? 

Thank you 

[Vinsinfo]

@Fightingfatigue No, we can't achieve it using CSS code because of the current code structure. We need to only create separate section for it by custom code. Since collapsible content is already available by default in the theme, we can use it. 

We can use collapsible rows only within the product information section, meanwhile collapsible content can be used anywhere. Example, we can use it to display FAQ section in any page.

Please let me know whether above solution worked for you. If it worked, please like and accept this comment, so that, it will be helpful for others who has same query.