Cart Drawer styling issue on mobile screens

Technical Q&A
,
1

Hello Team,

I am facing some CSS issue on cart drawer. On mobile phone when I am on product page and try to open cart drawer there is some alignment issue.

Please see the attached Screenshot of the styling I have highlighted that.

akash_95_0-1736425317455.png
akash_95_0-1736425317455.png790×387 131 KB

Looking forward for your reply.

Regards

2

Hello @akash_95

Go to Online Store > Themes > Actions > Edit Code > base.css

Add below code at the bottom of base.css file

.cart-drawer__form .quantity-popover-container {
    width: 142px !important;
}
.cart-drawer__form quantity-input.quantity.cart-quantity {
    width: 100% !important;
}
body .cart-drawer .cart-item cart-remove-button {
    margin-left: 1rem !important;
}

oscprofessional_0-1736426485741.png
oscprofessional_0-1736426485741.png1906×862 205 KB

oscprofessional_2-1736426536838.png
oscprofessional_2-1736426536838.png362×746 51.9 KB

3

HI @akash_95

In order to fulfill your request, please follow these steps
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above 

{% style %}
@media screen and (max-width: 768px){
quantity-input.quantity.cart-quantity {
width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width)* 2) !important;
}
}
{% endstyle %}

Here is the result:

image_480.png
image_480.png249×480 58.3 KB

I hope this helps

Best,

Daisy