breesmith12010

On 8/18/2021 at 9:13 PM, creedon said:

My code doesn't change the gallery. Change your Content Alignment to Top. Go to a products detail.  Edit Design.

Change the alignment.

Save.

Let us know how it goes.

Thank you so much - I can't believe I missed that! 🤦‍♀️

On 11/24/2020 at 8:12 PM, creedon said:

@Tarta

Replace your code with the following.

<style>

  /* begin reorder ProductItem-details-checkout */
  
    /*
    
      There is something odd going on with v7.1 CSS as of 11/24/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;
        -moz-box-ordinal-group: unset;
        -ms-flex-order: unset;
        -webkit-order: unset;
        order: unset;
        
        }
        
    /* begin change order of elements */
    
      .ProductItem-details .ProductItem-details-excerpt {
      
        -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
        order: 6;
        
        }
        
      /* end change order of elements */
      
    .ProductItem-details .ProductItem-details-checkout {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      }
      
    /* end reorder ProductItem-details-checkout */
    
  /* begin change spacing of ProductItem-details-checkout */
  
    .ProductItem-details .ProductItem-details-checkout {
    
      grid-gap: 13px;
      gap: 13px;
      
      }
      
    .ProductItem-details .product-quantity-input,
    .ProductItem-details .ProductItem-product-price,
    .ProductItem-details .sqs-add-to-cart-button-wrapper,
    .ProductItem-details .variant-option
    
      {
      
        margin-bottom: 0;
        
        }
        
    .ProductItem-details .ProductItem-details-excerpt p:first-child {
    
      margin-top: 0;
      
      }
      
    /* end change spacing of ProductItem-details-checkout */
    
  /* begin product variants two-up */
  
    .ProductItem-details .product-variants {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      grid-gap: 13px;
      gap: 13px;
      
      }
      
    /* end product variants two-up */
    
  </style>

This is for a v7.1 site and is specific to Tarta's needs.

I'm hesitant to change the spacing under the price as there is some code hidden there that will pop up when certain circumstances are met. If I change the spacing it may look even worse space wise when those conditions are met.

Let us know how it goes.

Hello @creedon! I used your code above (THANK YOU!) but now my product image & thumbnail carousel is displaying really low on the page - do you know how I can fix this? Thank you!

Here is a link to a product page - https://www.visitplanetjoy.com/shop/p/abstract-rainbow-recycled-high-waisted-bikini-top-bottom-set