artgirl81

1 hour ago, creedon said:

At this point given I don't know what code you've installed or not installed I wouldn't suggest trying surgery to install the right code. Just cut out any code related to the effect you want to achieve and install from ground zero. Use the code I pointed to above.

I extracted everything. I'm really sorry, but the issues is I *cannot* decipher what you are pointing me to. I'm not sure how else to articulate. Thank you -- I really appreciate your time. A

20 hours ago, creedon said:

I'm suggesting that whatever code you have installed on your site's Store page be removed because it appears to me to be old code.

Then install the codes I pointed to in my previous post.

Hello -- I did remove it when you said to, but I'm unclear what part of that page has the correct code for my template. There are several entries of code. The script that starts like this??: 

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

Thank you!!

1 hour ago, creedon said:

It looks like you've got some old code going there. Remove it and please see the following.

With the new code you can get this.

Let us know how it goes.

Hi -- I really appreciate your reply. I'm so sorry but which code are you referring to?--that page is quite long now. Are you referring to the code on Github that is referred to? Thank you for your help! A

20 hours ago, artgirl81 said:

This is super close for me....I just need to move that button over or span it the whole column. I tried changing "center" to "start" and "left" but it didn't seem to work. Help? https://www.autoharpmusic.co/music/p/o-little-town-of-bethlehem-autoharp Thanks, A

please 🙂

On 11/4/2020 at 11:32 PM, creedon said:

The code @tuanphan posted was for a Squarespace v7.0 site. Your site is v7.1 and requires different code.

Add the following to Store Settings > Advanced > Page Header Code Injection.

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

Let us know how it goes.

This is super close for me....I just need to move that button over or span it the whole column. I tried changing "center" to "start" and "left" but it didn't seem to work. Help? https://www.autoharpmusic.co/music/p/o-little-town-of-bethlehem-autoharp Thanks, A

Hi -- It's all public. Sorry, not quite understanding. One of the product pages is here: https://www.autoharpmusic.co/music/p/oh-danny-boy-autoharp-music I understand you guys were reordering the grid items but it didn't seem to work on my template. 

(I'd also love to move that "additional info" for that page at the bottom, bottom to the very top of the product.

Thank you, Alice

On 9/27/2022 at 5:13 AM, tuanphan said:

.product-price {
    margin-bottom: 0px !important;
}
.product-excerpt>p:first-child {
    margin-top: 0px !important;
}
.sqs-add-to-cart-button-wrapper {
    margin-top: 0px !important;
}

Oh this would be wonderful but it doesn't seem to work with my template. Could you adjust it for me? My site is autoharpmusic.co Thanks!

On 11/21/2020 at 9:57 AM, tuanphan said:

Can you share site url? We can give the code to solve.

Also looking for a fix for this -- X is far too small. Thanks!

On 11/28/2021 at 7:15 PM, raego said:

On 11/27/2021 at 3:58 AM, tuanphan said:

@media screen and (max-width: 767px) {
    .list-grid {
        grid-template-columns: repeat(2,1fr) !important;
        display: grid;
        float: left !important;
    }
}

I got this to work, in general, for a video page. I added in the float and the clear with the (odd) rule set, but the right column doesn't seem to pop-up next to the left column. Can you help? Page is: https://www.autoharpmusic.co/videos-demos-and-tips/v/getting-started-tuning-your-autoharp-303m Thank you!

Just saw this. Thanks!

Is there a way to change the X in the lightbox to the word Close, OR to make it so that the X is darker, and larger? -- especially on mobile, it's very faint.

Does anyone know the CSS for this element? Thanks, A

Yes I have this exact issue. First it alerted me that my pngs were too large so I downsized them....which helped but didn't get rid of the issue entirely. Also, I'm with you...there's a place for a "description" but it doesn't populate anything right now -- specifically in the lightbox, or anywhere else: hover, etc.