[Resolved] Cart and account icon got together

[Georgi]

Hello,

Everything was running smoothly on the staging site before deploying GP on my original site but after the deployment suddenly the cart icon and account icon got too close together after adding a product in the cart: https://prnt.sc/jc0pDYusUAAB

If there is no product, there is a good distance between them.

Can you help me resolve this?

[David]

Hi there,

the issue is using this absolute position CSS to place the icons:

.inside-header span.account-icon {
    position: absolute;
    right: 90px;
    margin-bottom: 3px;
}

.inside-header .custom-cart {
    position: absolute;
    right: 55px;
}

Remove that CSS and add this CSS:

.inside-header span.account-icon {
    margin-bottom: 3px;
    margin-right: 5px;
}

.header-aligned-center:not([class*="nav-float-"]) .inside-header {
    flex-direction: row;
    align-items: center;
}
.header-aligned-center:not([class*="nav-float-"]) .inside-header:before {
    content: '';
    display: block;
    width: 90px;
}
.site-logo {
    margin: auto;
}

[Georgi]

Hey David,

Thanks, this helps divide them when there is a product in the cart but it actually pushed them almost to the end of the screen: https://prnt.sc/OhNPRZtzkchv

[David]

In my CSS see this rule:

.header-aligned-center:not([class*="nav-float-"]) .inside-header {
    flex-direction: row;
    align-items: center;
}

change it to:

.header-aligned-center:not([class*="nav-float-"]) .inside-header {
    flex-direction: row;
    align-items: center;
    padding-right: 40px;
}

adjust the padding-right value to keep it off the edge.

[Georgi]

Thank you a lot, David!! 🙂

[David]

You’re welcome

[Author]

Posts