Add to Cart Summary Block

Site URL: https://www.huntandgathergrocer.com.au/

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item, .sqs-block-summary-v2 .summary-item.positioned {
    padding-top:30px AUTO;
  }
  .summary-content {
    position:TOP;
  }
  .summary-title .summary-title-link:after {
    content: '    add to cart';
    background-color: #FDEEF4;
    border-radius: 1px;
    display: block;
    padding: 10px 10px;
    font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    background-color: normal;
    border-color: normal;
    position: AUTO;
    bottom: -10
  }
 

how do i make this button shorter and not take up the length of the screen / page? 

Also how would i center it under the price of the product ? instead of between the heading and the price please see url 

also if any one could help me understand as to why my page is loading off center on mobile phone that would be amazing? 

I am stumped as to why i've changed my boarder so many times and my mobile break point and this isn't working

Hi. Use this code

.summary-title .summary-title-link:before {
    content: ' add to cart';
    background-color: #fdeef4;
    border-radius: 2px;
    display: block;
    padding: 10px 20px;
    font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    width: 100px;
    margin: 20px auto;
}

On 5/14/2021 at 6:39 PM, tuanphan said:

Hi. Use this code

.summary-title .summary-title-link:before {
    content: ' add to cart';
    background-color: #fdeef4;
    border-radius: 2px;
    display: block;
    padding: 10px 20px;
    font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    width: 100px;
    margin: 20px auto;
}

Thank you, however now on my product categories shop 

Mesh market bags (example ) 

The buttons are long? Is it possible to make them the same sitewide

As you did with code above on summary on home page. 

On 5/14/2021 at 6:39 PM, tuanphan said:

Hi. Use this code

.summary-title .summary-title-link:before {
    content: ' add to cart';
    background-color: #fdeef4;
    border-radius: 2px;
    display: block;
    padding: 10px 20px;
    font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    width: 100px;
    margin: 20px auto;
}

<style>
  .ProductList-grid .ProductList-item {
    padding-bottom: 50px;
  }
  .ProductList-grid .ProductList-item .sqs-add-to-cart-button {
    position: absolute;
    z-index: 1000;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    margin: 20 auto;
    padding-right: 5px;
    padding-left: 5px;
  }
  .ProductList-grid .ProductList-item .ProductList-overlay {
   margin-bottom: 70px; 
  }
</style>

<script>
  $(".ProductList-grid .ProductList-item").each(function(e){
    $(this).append('<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button" role="button" tabindex="0" data-product-type="1" data-original-label="Add To Cart"><div class="sqs-add-to-cart-button-inner">Add To Cart</div></div>');
  });
  $(function() {
    $(".ProductList-grid .ProductList-item").each(function(e){
      var dataItemId = $(this).attr('data-item-id');
      $(this).find('.sqs-add-to-cart-button').attr('data-item-id', dataItemId);
    });
  });
</script>