Jump to content

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 comment
  • 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 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, Delivery Date Picker, Keyword Highlighter
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 comment

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 comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.