Modify dynamic Checkout buttons in cart drawer

[JesusGomicare]

Hi guys,

Im trying to modify the size and location of my cart drawer. They currently look like this

I want them to be smaller, like this, but side by side and not stacked on top of each other. The idea is so when it is an Apple device the Paypal and google pay are next to each and the Apple pay is full sized stacked. Any ideas on how to do it?

Here's the website https://gomicare.es/pages/tienda 

Thanks a lot for your help!

[ranazain2626]

open the site on Brosewr then go to inspect and change the view to mobile view and find the cart  class name 
after finding the class go to edit code in your theme dashboard 

@media 768px is used for mobile devices

/* Mobile view customizations for the cart drawer */
@media (max-width: 768px) {
  /* Adjust the size of the cart drawer */
  .cart-drawer { 
    width: 100% !important; /* Full width of the mobile screen */
    height: 100vh; /* Full viewport height */
    max-width: 100% !important; /* Ensure it doesn't exceed the screen width */
    position: fixed; /* Fix the position to the screen */
    bottom: 0; /* Align to the bottom of the screen */
    left: 0; /* Align to the left edge */
    background-color: #fff; /* Adjust background color */
    border-radius: 0; /* Remove any rounded corners, or adjust as needed */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
    transition: transform 0.3s ease-in-out; /* Smooth transition */
  }

  /* If you want to center the drawer on mobile: */
  /* Uncomment this block to center the cart drawer in the middle of the screen */
  /*
  .cart-drawer {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%; /* Adjust the width as necessary */
    height: auto; /* Optional, depending on your design */
  }
  */

  /* Adjust any inner content (e.g., cart items, close button) */
  .cart-drawer .cart-items {
    padding: 20px;
  }

  .cart-drawer .cart-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
  }

  /* Optional: Add a semi-transparent background overlay */
  .cart-overlay {
    background: rgba(0, 0, 0, 0.5); /* Dark background */
    z-index: 9999;
  }
}

I hope this works for your case 
if this is any query fell free to connect

[JesusGomicare]

I've added the CSS to the Base.css, but I'm afraid it didn't work, it moved everything to the left and in some mobiles it doesn't even display the "X" to close the cart drawer. 

What should I do to move the dynamic checkout buttons to be next to eachother?

Looking forward to your reply and thanks for everything!

[websensepro]

Hi @JesusGomicare .

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(max-width:768px){
.drawer__inner {
    width: 100%;
    margin: 0 auto;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[JesusGomicare]

I've done so, but nothing has changed. The first CSS I have to add it on the Base.css right?

[websensepro]

Yes, you have to include it in the base.css.

And it's showing perfectly for me.

[JesusGomicare]

Ok I see the issue, I didn't explain myself properly, I want the Paypal and Google Pay buttons to 

1. Look smaller, about half the size
2. To be side by side, instead of stack on top of eachother

[ranazain2626]

inspect on drawer and find the X class file and then go to edit code and margin or padding according to your view