Jump to content

DaisyDesigns

Member
  • Posts

    2
  • Joined

  • Last visited

Everything posted by DaisyDesigns

  1. I am trying to move my item description on top of the add-on products and the additional info below the item description. 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>
×
×
  • 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.