[Resolved] Cart and account icon got together

Home Forums Support [Resolved] Cart and account icon got together

Home Forums Support Cart and account icon got together

  • This topic has 5 replies, 2 voices, and was last updated 4 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2179611
    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?

    #2179655
    David
    Staff
    Customer Support

    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;
    }
    #2179694
    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

    #2179712
    David
    Staff
    Customer Support

    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.

    #2179725
    Georgi

    Thank you a lot, David!! 🙂

    #2179802
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.