Jump to content

Product Page Description Block

Recommended Posts

Site URL: https://trombone-chartreuse-l445.squarespace.com/config/


On a product-page, I currently have the image gallery taking up 50% of the screen, the other 50% is for the product description – I have 3 questions :


1) How to control the description block's width? Right now it just takes up 50%, which is way too large. 

2) The description block is currently fixed, only half of the screen (images) scrolls down, I like that but, I want the description block to not move but always stay centered vertically in the viewport, regardless of the content quantity, which I'll adjust...

3) Running on Squarespace 7.1, where and how do we make adjustments for everything that is mobile?


Thanks in advance!!

Link to comment
  • Replies 3
  • Views 671
  • Created
  • Last Reply

1. Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
/* description width */
section.ProductItem-details {
    width: 70%;
/* gallery width */
figure.ProductItem-gallery {
    width: 30%;

2. 3 Don't really understand the question

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thanks for your reply! 🙂

I wasn't very clear... I like that the screen is split 50/50 between images and description. Here's what I'm trying to figure out :

How do I make the description content always centered vertically. Trying to get the same at the top and at the bottom of the description content, based on viewport.

Thanks in advance!

Link to comment


This topic is now archived and is closed to further replies.

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