[Resolved] Header Cart items sizing

Home Forums Support Header Cart items sizing

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1519773
    troyw

    Hey team,

    I seem to be having an issue with the Shopping Cart located in the header of the website. This used to look OK, but now the image is too big and the Paypal button is not straight?
    Initially I thought it was Litespeed Cache, which is usually the culprit when things like this happen, but having disabled LiteSpeed, the issue is still there.

    Any ideas what could be happening?

    Thanks

    #1519848
    Leo
    Staff
    Customer Support

    Hi there,

    Are you referring to this button here?
    https://www.screencast.com/t/SvacqqO2mv

    Would decrease the secondary nav menu item width work?
    https://docs.generatepress.com/article/secondary-menu-item-height-width/#width

    #1519856
    troyw

    Hey Leo,

    No, I have tried adjusting the width and the Dropdown location, but it doesn’t fix the issue?

    #1519857
    Leo
    Staff
    Customer Support

    Just to make sure, you are referring to the button here correct?
    https://www.screencast.com/t/SvacqqO2mv

    What is the menu item width set for the secondary navigation?

    From the code, it looks like 60px.

    Let me know 🙂

    #1519880
    troyw

    Hey Leo,

    Yes, that is the cart but you need to add an item into it to see the issue. Once there is an item in the cart and you hover over the button, it shows the item image, price and some buttons. The Paypal button is off centre and the image is too far left or just too big.

    #1520816
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This should help:

    .woocommerce-mini-cart__buttons.buttons.wcppec-cart-widget-spb {
        justify-content: center;
        margin-top: 10px;
    }
    
    .woocommerce ul.cart_list li img {
        width: 40px;
    }

    Let us know 🙂

    #1523047
    troyw

    Hey Tom,

    I tried adding this css in the child theme style.css sheet, but no luck. I then tried adding it to Additional CSS in customizer and still no go? It doesn’t appear to have changed anything at all?
    I have left the css in the style.css for now.

    #1523743
    David
    Staff
    Customer Support

    Hi there,

    you have these two lines before Toms CSS:

    }
    <link rel=”stylesheet” href=”stylesheet.css” type=”text/css” charset=”utf-8″ />

    These need to be removed as they are breaking the stylesheet and nothing after them will work.

    Then change the width: 40px; to width: 40px !important; in the CSS Tom provided.

    #1524608
    troyw

    That’s great David and has fixed the image issue. Is there a way of also centring the Paypal button?
    Cheers

    #1524953
    David
    Staff
    Customer Support

    Looks like you have a spare } in your CSS that is affecting that, i have marked it with a comment below:

    } /* This bracket needs removing */
    .woocommerce-mini-cart__buttons.buttons.wcppec-cart-widget-spb {
        justify-content: center;
        margin-top: 10px;
    }
    
    .woocommerce ul.cart_list li img {
        width: 40px !important;
    }
    #1526137
    troyw

    Wow, well spotted David. Thanks so much, all sorted now.

    #1526348
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.