Help moving 'additional info' block on product page

Hi all, I am attempting to move this accordion block above the add to cart button and the "no risk return..." text on on my product pages. I've tried to use some code from forum posts like this in the past, but to no avail. Any help would be so appreciated! (I would need to be able to replicate this custom placement on every product page.)

And, maybe I should clarify that I would need the accordion to be half its current size, too. Wouldn't want it jutting out.

Thanks in advance,

Rosa

Please see the following.

Browse the follow on posts to gain a deeper understanding of how it works.

Let us know how it goes.

Thanks for your quick response. I found that this almost worked for me, but now I just need it to show up in the same place on mobile. For some reason, on mobile, it shows up above the price. I'd like it to appear below all the text and above the quantity, like it does on desktop.  

On 1/6/2023 at 3:53 AM, rosan said:

Thanks for your quick response. I found that this almost worked for me, but now I just need it to show up in the same place on mobile. For some reason, on mobile, it shows up above the price. I'd like it to appear below all the text and above the quantity, like it does on desktop.  

 

Can you share link to this product? We can check easier

On 1/8/2023 at 11:06 AM, tuanphan said:

Can you share link to this product? We can check easier

https://flounder-orange-slbh.squarespace.com/solar-panels/p/uleaf

Thanks! (I would want it to apply to all products though)

On 1/14/2023 at 6:46 AM, tuanphan said:

Don't remove any code in your current code. Add this to Design > Custom CSS

@media screen and (max-width:767px) {
section.ProductItem-additional {
    order: 3;
    margin-top: 0px !important;
}
}

 

Thank you so much! This worked beautifully.