[Resolved] Header Cart items sizing

[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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[troyw]

Hey Leo,

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

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[troyw]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[troyw]

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

[David]

Glad we could be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts