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

Customising line height in product description on Mobile


amy_knowlton

Question

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

 

Edited by amy_knowlton
Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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-

Posted Images

3 answers to this question

Recommended Posts

  • 0

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

 

Link to post
  • 0
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;
}
}

 

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