Cart notification and cart bubble css problem after clicked button add to cart

[UTOPIA-PARIS]

Hey !,  after i clicked button add to cart button into the product view i don't know why this showed up like that :

the url website is: utopia-paris.fr

Thanks !

[suyash1 · Accepted solution]

@UTOPIA-PARIS  remove previous line and try this

.cart-notification-product__image img{margin-top: 0 !important;}

[BSSCommerce-B2B · Accepted solution]

@UTOPIA-PARIS , use  this code in base.css  file 

#cart-notification-button,
.cart-notification__links > button {
    color: rgb(var(--color-foreground))!important;
}
.cart-count-bubble {
  left: 2.2rem!important
}

[suyash1]

@UTOPIA-PARIS - 
please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

.cart-notification-product__image{margin-top: 0 !important;}

[UTOPIA-PARIS]

it's still te same even after put this code 

[suyash1 · Accepted solution]

@UTOPIA-PARIS  remove previous line and try this

.cart-notification-product__image img{margin-top: 0 !important;}

[UTOPIA-PARIS]

Thanks it's work but the bubble cart number indications still here :

and how to change the color of the first button of cart view ? because its not appear on personnalisation of shopify 

thx for you help !

[suyash1]

@UTOPIA-PARIS  for bubble please add this

.cart-count-bubble{left: 2.2rem;}

[BSSCommerce-B2B]

@UTOPIA-PARIS,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid

Step 3: Add this code before </body>

<style>
#shopify-section-sections--23577226641748__header {
   position: relative;
}
cart-notification {
    position: absolute;
    top: 35px;
    right: 0;
    min-width: 380px;
    z-index: 1000
}
#cart-notification-button,
.cart-notification__links > button {
    color: rgb(var(--color-foreground));
}
#cart-notification-product {
    padding: 0;
    margin-top: 55px
}
</style>

Result:

[UTOPIA-PARIS]

hey ! thanks for you help but this getting too much on the right, its better to keep is default position.

Did you know how to fix the position of the cart buble number ? and to change the color of first button of the cart view :

thanks !

[BSSCommerce-B2B · Accepted solution]

@UTOPIA-PARIS , use  this code in base.css  file 

#cart-notification-button,
.cart-notification__links > button {
    color: rgb(var(--color-foreground))!important;
}
.cart-count-bubble {
  left: 2.2rem!important
}

[UTOPIA-PARIS]

This worked perfectly thanks !

[UTOPIA-PARIS]

But when we get back to the shop the bubble go away from his place

[BSSCommerce-B2B · Accepted solution]

@UTOPIA-PARIS , sorry please change the previous code like this

#cart-notification-button,
.cart-notification__links > button {
    color: rgb(var(--color-foreground))!important;
}
.cart-count-bubble {
  left: auto!important;
  right: 0px!important
}

[UTOPIA-PARIS]

It's okay ! perfect thx for u help !!!

[BSSCommerce-B2B]

You're welcome 😊

[UTOPIA-PARIS]

hey ! i come back because now when you click on button to add to basket the span is hidden like this : 

by the way, how can i change the color of buttons of card notification ? 

thanks !