Adjust position of "Continue Shopping" button on empty cart page

Site URL: https://www.thegrannywardrobe.com/cart

I'm running into walls on aligning the Empty Cart Message and the Continue Shopping Button.

I've tried the below code but the message is slightly off the centre and the button is just not aligning at all. 😞

Quote

.empty-message {
   visibility: hidden;
   text-align: center;
}
.empty-message:before {
   visibility: visible;
   content: "Your shopping cart is empty.";
}

#cart [data-test="continue-shopping-link"] span {

  text-align: center;
  
  }

Thank you so much in advance! Happy Easter!

Best,

Lorraine

Add to Design > Custom CSS

/* Continue shopping */
a[data-test="continue-shopping-link"] {
    display: block;
    text-align: center !important;
    margin: 0 auto !important;
}

15 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Continue shopping */
a[data-test="continue-shopping-link"] {
    display: block;
    text-align: center !important;
    margin: 0 auto !important;
}

 

OMG! Thank you so much! It worked!! 🙂 🙏

Hello,

I am in a 7.1 store and this solution did not work for me. I was able to shift the text to center, but not the button. Has anyone solved this please?

On 1/5/2023 at 3:42 AM, Don_Leverich said:

Hello,

I am in a 7.1 store and this solution did not work for me. I was able to shift the text to center, but not the button. Has anyone solved this please?

Hi,

If you share link to your cart page, we can check easier

56 minutes ago, tuanphan said:

Hi,

If you share link to your cart page, we can check easier

https://www.donleverich.com/cart 

Upon inspection I was able to adjust the button in some browsers to expand across the div with the text centered. But cannot figure out how to override the static placement of the button container.

custom css added by me:

/* Shopping Cart Page Title */
.cart-title {
  text-align: center !important;
}

.empty-message {
  text-align: center !important;
}

.B0yyBzha4XLlhHMgHNKw.nhlNN4NzPVOWRpKb5TAO.sqs-editable-button.sqs-button-element--secondary.cart-continue-button {
  display: block !important;
}

On 1/7/2023 at 10:24 PM, Don_Leverich said:

https://www.donleverich.com/cart 

Upon inspection I was able to adjust the button in some browsers to expand across the div with the text centered. But cannot figure out how to override the static placement of the button container.

custom css added by me:

/* Shopping Cart Page Title */
.cart-title {
  text-align: center !important;
}

.empty-message {
  text-align: center !important;
}

.B0yyBzha4XLlhHMgHNKw.nhlNN4NzPVOWRpKb5TAO.sqs-editable-button.sqs-button-element--secondary.cart-continue-button {
  display: block !important;
}

Use this CSS