Archived topic

Header Cart items sizing

11 replies · Started by troyw on November 5, 2020

Viewing posts 1–12 of 12

November 5, 2020 at 2:53 pm #1519773

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

November 5, 2020 at 5:18 pm #1519848

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

November 5, 2020 at 5:24 pm #1519856

Hey Leo,

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

November 5, 2020 at 5:28 pm #1519857

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 :)

November 5, 2020 at 5:57 pm #1519880

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.

November 6, 2020 at 9:20 am #1520816

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 :)

November 8, 2020 at 2:56 pm #1523047

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.

November 9, 2020 at 6:03 am #1523743

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.

November 9, 2020 at 3:44 pm #1524608

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

November 10, 2020 at 1:45 am #1524953

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

November 10, 2020 at 7:13 pm #1526137

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

November 11, 2020 at 12:35 am #1526348

Glad we could be of help

This archived topic is closed to new replies.

Start building better websites today.