Why aren't both accordion blocks sitting to the left of the image?

[Brett_Dvoretz]

Hi. I am customizing the design of my website and I added two accordion blocks. One is sitting to the left of the image where it should be but the other is sitting below it and full page width instead. This looks bad and I want them both sitting to the left of the image like the first one? I'm not sure why they aren't, as I used this exact theme and design on another website with two according images and they both sit in the right spot on that site. 

[dws_pvt_ltd]

Please share your store URL and password.So that I will check and let you know the exact solution here.

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[Brett_Dvoretz]

Here is the URL to that page. https://www.terrafloraglobal.com/products/aglaonema-cotton-candy

The store is not password protected 

[Moeed]

Hey @Brett_Dvoretz 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Brett_Dvoretz]

Here is the URL to that page on my store

https://www.terrafloraglobal.com/products/aglaonema-cotton-candy

[dws_pvt_ltd]

Hello @Brett_Dvoretz, Your structure seems different for both accordion. The first accordion comes from the product details of the product info block and second accordion is outside that parent div and it having separate new block. So you have to do the both accordion in the one block.

see the screenshot below,

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[Brett_Dvoretz]

Thanks. I saw that when I inspected it too. I'm not sure why that is happening though or how to fix it. I just used the customizer like I normally would to add that second accordion section after I added the first. I don't know how or why it is outside that parent div or how to fix it.

[dws_pvt_ltd]

You can do it in the customisation of the theme customize, open that section of this page and please add the second accordion to it.

[dws_pvt_ltd]

Hello do it in the product page of the theme customisation. I think this is the block of the collapsible row inside the product information. please see the screenshot below and you can see it how add the another accordion in the product information.

Add like the below 1st screenshot. by adding the collapsible row blocks in the product information you can add a same accodrion with same width.

You can see it like the below screenshot.

Currently, I think you have the structure like the below screenshot of your product page.

[Brett_Dvoretz]

Hi. I did it in the product page of the theme customisation initially. If you look at the image, you can see it is in the product information section. That's why I'm confused

[dws_pvt_ltd]

I think it having an issue with code of that block or section, i think some conditions or other code is there. because my accordion is works  fine. see the screenshot below,

[Brett_Dvoretz]

I know. I'm trying to find and fix the issue 😂. I have another website that essentially has the same exact design (same theme and everything) and it doesn't have this issue.

[Brett_Dvoretz]

It seems like any section I try and add below the collapsible content sections gets pushed out of the product-info div class. Any ideas on what code I might need to alter to fix that?

[dws_pvt_ltd]

I think you have remove that product block from product information and you should use new section of collapsible row and add data to that section. Add it to the below product information section.

[Brett_Dvoretz]

Hi. I've tried that. I have tried deleting the current collapsible rows and adding new ones. It did the same thing. I also tested adding other types of blocks there after the collapsible row to see what would happen, and it seems to push anything below it out of position.

[Brett_Dvoretz]

But anything above it goes into the proper position. So there is some issue where using a collapsible row pushes everything below it out of the proper div class it seems. 

[dws_pvt_ltd]

@Brett_Dvoretz, See if you make a structure to put both accordion in one block then it should looks like the screenshot below.

1. For upper structure in text width.

2. For lower structure in full width like second accordion.

[Moeed]

Hey @Brett_Dvoretz 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.product__accordion.accordion.quick-add-hidden:nth-child(2) {
    width: 50.5% !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Brett_Dvoretz]

Will this affect how it looks on mobile if I enter that style info into the code?

[Moeed]

Hey @Brett_Dvoretz 

No this code won't effect mobile, this code is only for desktop.

Best Regards,

Moeed

[Brett_Dvoretz]

Thank you. I tried this and it still has a weird spacing issue

[Brett_Dvoretz]

It seems like any block I try and put below a collapsible content block gets pushed out of the product-info div class. I can't figure out how to solve this. Not sure what code file I should be looking in to fix it either.