Jump to content

How to design the product Details additional info?

Recommended Posts

1 hour ago, Banny said:

Hi all, here is my site. 

 👉ooo project

I am trying to design the additional info in the product page.

Is it possible to make the spacing between 2 img smaller in mobile?

 

545531520_2022-10-245_53_44.thumb.png.618f00e70dffe30230ee7cf4087cb14d.png2125715455_2022-10-245_54_02.thumb.png.00fb1fbfce5e38dd683e101347f5cc4a.png
 

Another question is, how to change the font size of Related Products?

Thanks for your help!!!

 

image.thumb.png.d8673b9465f823b4c2649a46ae0ba45f.png

 

For the smaller space of images in  the additional information on mobile display, you can try

@media only screen and (max-width: 767px) {
  .ProductItem-additional .sqs-layout .sqs-row .sqs-block-image {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

 

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

Font-size of the related products:

.ProductItem-relatedProducts .grid-main-meta .grid-title {
  font-size: 16px;
}

Add my code on Home > Design > Custom Css

Support me by pressing 👍 if this useful for you

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

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.