Archived topic
Cart and account icon got together
5 replies · Started by Georgi on April 6, 2022
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?
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;
}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
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.
Thank you a lot, David!! 🙂
You're welcome
