Jump to content

Customising line height in product description on Mobile

Recommended Posts

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

Hi!

I inputted some code to re-organise the order of my product description so that the product info sits above the button but now my line height is far too big. I just wondered if there was a way I can amend this and reduce the line height between the header, price & product info? The password for my url is peanutsandpomelo

CODE: @media screen and (max-width:640px) {
section.ProductItem-summary.clear {
   display: flex; 
    flex-direction: column;

}
figure.ProductItem-gallery {
    order: 0;
}

.collection-type-products .ProductItem-details .ProductItem-details-excerpt {
    order: 2;
}
.collection-type-products .ProductItem-details h1.ProductItem-details-title{order:1;}
}

 

Screenshot 2021-02-24 at 17.49.54.png

 

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

Add to Design > Custom CSS

/* Product space */
@media screen and (max-width:767px) {
h1.ProductItem-details-title {
    margin-bottom: 5px !important;
}
.ProductItem-product-price {
    margin-bottom: 0px !important;
}
.product-price {
    margin-bottom: 0px !important;
}
.ProductItem-details-excerpt {
    margin-bottom: 5px !important;
}
}

 

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
On 3/4/2021 at 3:23 AM, amy_knowlton said:

Amazing thank-you sooo much! 

Hi. I see products show 1/4. You can use this CSS to add an arrow slide

/* Arrow slide */
/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
.ProductItem .ProductItem-gallery-carousel-controls>div::after, .ProductItem .ProductItem-gallery-carousel-controls>div::before {
    border-color: black !important;
}
}

 

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

Archived

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.