Align additional info with header & product info above

Site URL: https://onion-guitar-w3xs.squarespace.com/

Password: peanutsandpomelo

I am a complete novice at coding but have managed to add dropdown accordions to the additional info of the products in my shop. However I want them to align with the header, product info and 'add to cart' button but currently they are in really random positions. If any-one can help with this I would be super grateful! 

 I currently have this code added into the additional info section of the product:

<p><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
    $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
    $(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();});
    });
    </script></p>

And this in the markdown section:

### + Product details
This t-shirt is made with 100% combed ring spun cotton and has a classic ribbed crew neck.
Machine wash at max. 60ºC

### + Additional info
All items are individual & custom embroidered so may not look exactly as pictured. Please allow 2 weeks for delivery once order is placed.

1 hour ago, amy_knowlton said:

Site URL: https://onion-guitar-w3xs.squarespace.com/

 

Password: peanutsandpomelo

I am a complete novice at coding but have managed to add dropdown accordions to the additional info of the products in my shop. However I want them to align with the header, product info and 'add to cart' button but currently they are in really random positions. If any-one can help with this I would be super grateful! 

 

 I currently have this code added into the additional info section of the product:

<p><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
    $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
    $(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();});
    });
    </script></p>

And this in the markdown section:

### + Product details
This t-shirt is made with 100% combed ring spun cotton and has a classic ribbed crew neck.
Machine wash at max. 60ºC

### + Additional info
All items are individual & custom embroidered so may not look exactly as pictured. Please allow 2 weeks for delivery once order is placed.

Which screen size you are seeing that issue

How do I find what screen size? I'm using a 15inch macbook pro if that helps?
Having refreshed the page they are now both actually aligned on the left but I would just like to move them to be aligned with the other information on the page - as pictured in the screenshot...

Any help would be much appreciated! 

On 2/26/2021 at 10:34 PM, amy_knowlton said:

How do I find what screen size? I'm using a 15inch macbook pro if that helps?
Having refreshed the page they are now both actually aligned on the left but I would just like to move them to be aligned with the other information on the page - as pictured in the screenshot...

 

Any help would be much appreciated! 

Hi. Do you still need help on this?

1 hour ago, tuanphan said:

Hi. Do you still need help on this?

Hey,

Yes I do.

You can see under the product 'dad cap' I've got the dropdowns working I just need the position to change!

Can you help? 

On 3/4/2021 at 4:06 PM, amy_knowlton said:

Hey,

Yes I do.

You can see under the product 'dad cap' I've got the dropdowns working I just need the position to change!

Can you help? 

 

 

Hi. It looks fine here. Did you solve this?

Also, I see this issue on tablet. You can add this code to Design > Custom CSS to increase width

/* product width tablet */
@media screen and (max-width:991px) and (min-width:768px) {
.ProductItem-details .product-variants {
    width: 100%;
}
.sqs-add-to-cart-button-wrapper {
    width: 100% !important;
}
}