Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Align additional info with header & product info above


Recommended Posts

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! 

568327531_Screenshot2021-02-25at22_23_30.thumb.png.db00a5907bc7e7e9ed90589f50b991fd.png

 

 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.

Edited by amy_knowlton
Link to post
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

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! 

568327531_Screenshot2021-02-25at22_23_30.thumb.png.db00a5907bc7e7e9ed90589f50b991fd.png

 

 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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

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...

473800543_Screenshot2021-02-26at15_32_54.thumb.png.8205544f8be396fef1c6a87bb02fe459.png

 

Any help would be much appreciated! 

Edited by amy_knowlton
Link to post
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...

473800543_Screenshot2021-02-26at15_32_54.thumb.png.8205544f8be396fef1c6a87bb02fe459.png

 

Any help would be much appreciated! 

Hi. Do you still need help on this?

Link to post
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? 

 


 

Screenshot 2021-03-04 at 09.05.36.png

Link to post
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? 

 


 

Screenshot 2021-03-04 at 09.05.36.png

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;
}
}

image.thumb.png.d2ff89674317f2a86da46096a3108bfb.png

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...