How to adjust spacing of icons at top right of page, on mobile only

[empiricalarby]

https://empiricalwater.com/

1. Need to bring the icons on the right slightly closer to each other.

2. Need to move that cart quantity badge so it’s no longer cut off on the right side.

Here’s the code currently affecting this:

@media(max-width:400px){
.header__icon--account.small-hide{
   display:flex !important;
 }
}

@media(max-width:600px){
.header__icon .icon{
    height: 1.5rem;
    width: 1.5rem;
}
}
@media(max-width:600px){
.header__icon, .header__icon--cart .icon {
    height: 3rem;
    width: 3rem;
}
}

Any assistance is greatly appreciated. Thanks.

[PageFly-Henry]

Hi @empiricalarby

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

a.header__icon.header__icon–account.link.focus-inset.small-hide {

width: 20px !important;

}

a#cart-icon-bubble {

margin-right: 0px !important;

}

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[empiricalarby]

That solved one of the issues, but I’m still seeing the quantity icon badge appearing directly to the right of the cart icon while on iphone. Instead of slightly to the right and slightly below like it usually is on desktop. Any idea what to do? Thanks

[empiricalarby]

For reference, here’s how that cart quantity shows on desktop:

The goal is to position that (1) the same way on mobile. Thanks