Jump to content

Recommended Posts

I am trying to move my item description on top of the add-on products and the additional info below the item description. 

image.png.cd796c39e7f48d917ba6ac635b69f507.png

I have a code in to move the add to cart above the description which I found in the forum.

Thank you!

 

<style>

  /*
 
    There is something odd going on with v7.1 CSS as of 11/04/20
    .ProductItem-details-checkout has a rule of display block but sub elements
    have order properties on them. The first bit of CSS unsets those items for a
    clean slate returning the elements to natural order.
    
    */
    
  .ProductItem-details .product-quantity-input,  
  .ProductItem-details .product-variants,
  .ProductItem-details .ProductItem-details-excerpt,
  .ProductItem-details .ProductItem-product-price,
  .ProductItem-details .sqs-add-to-cart-button-wrapper

 
    {
    
      -webkit-box-ordinal-group: unset;
      -ms-flex-order: unset;
      order: unset;
      
      }
      
  .ProductItem-details .product-variants {
 
    -webkit-box-ordinal-group: 8;
    -ms-flex-order: 7;
    order: 7;
    
    width: auto;
    
    }
    
  .ProductItem-details .ProductItem-details-excerpt {
 
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
    
    }
    
  .ProductItem-details .ProductItem-additional {
 
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
    
    }
    
  @media only screen and ( pointer: coarse ) and ( min-width: 1025px ), screen and ( min-width: 800px ) {
 
    .ProductItem-details .ProductItem-details-checkout {
    
      -webkit-column-gap: 3vw;
      -moz-column-gap: 3vw;
      grid-column-gap: 3vw;
      column-gap: 3vw;
      
      display: -ms-grid;
      display: grid;
      
      grid-row-gap: 3vh;
      row-gap: 3vh;
      
      -ms-grid-columns: 1fr 3vw 1fr 3vw 1fr 3vw 1fr 3vw 1fr;
      grid-template-columns: repeat( 5, 1fr );
      
      }
      
    .ProductItem-details .ProductItem-details-checkout > * {
    
      -ms-grid-column: 1;
      -ms-grid-column-span: 5;
      grid-column: 1 / 6;
      
      margin: 0;
      margin-right: 1vw;
      
      }
      
    .ProductItem-details .product-quantity-input {
    
      -ms-grid-row-align: end;
      align-self: end;
      
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      
      margin-right: 0;
      
      }
      
    .ProductItem-details .sqs-add-to-cart-button-wrapper {
    
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      
      -ms-grid-row-align: end;
      align-self: end;
      
      -ms-grid-column: 2;
      -ms-grid-column-span: 4;
      grid-column: 2 / 6;
      
      width: auto;
      
      }
    }
    
  @media only screen and ( pointer: coarse ) and ( max-width: 1024px ), screen and ( max-width: 799px ) {
 
    .ProductItem-details .ProductItem-details-checkout {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      }
    }
    
  </style>

Link to comment
  • Replies 1
  • Views 209
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.