Deformed Cart

[YarosIK]

Hello when i add a product in my cart, and when i click on the small cart Icon it appears deformed, (see picture) how can i fix this ? thanks

[[email protected]]

The problem you see is that there's no enough space for both buttons and that's why they fall into a new line. There are different ways to address that, but the way I'd do that, based in your screenshot, would be by enforcing both buttons to take the full width of it's container. Without the selectors is difficult to provide a fix, but I hope the general concept helps you nonetheless.

[YarosIK]

Hello urdeke thank you for you reply, yes i agree about the strategy, however i do not have the technical skills to do it manually myself, if anyone can help me out on where (and how) it is in the change that i need to make then change that would be great

[[email protected]]

If you have a url for you website I can give a look for you. I always use either a child theme or a specific site plugin, but I believe you can also use the customizer plugin that comes with the theme.

[H.K. Latiyan]

@YarosIk: Please share the site url with us to check this.

[YarosIK]

yes the url is www.dev.classpro.be thank you for the help !

[[email protected]]

Try adding this to wp-admin -> appearance -> customize -> custom css : .sleek .woocart .buttons .button { width: 100%; margin-bottom: 5px; } Let me know if that works for you

[YarosIK]

Hi Urdeke, i tried your code and it works perfectly ! Thank you very much the cart buttons are nice now (see, screenshot 1). I just have one more questions, apparently there is a difference between "cart columns" when you click on your "cart" icon from the home page (screenshot 1) and when you click on it form the "product" page, (see screenshot 2). When you click on the cart from the home page the first line "Jour1 (9h)...." doesn't start on the line, is there a way to force is si that it is the same as in screenshot 2 ? many thanks in adavnce

[Anshuman Sahu]

Please try adding the given css . i was not able to perfect it like in the product page but it will work .   body:not(.woocommerce) dd,body:not(.woocommerce) dt {     display: inline-block;     font-size: 12px;     color: #999; }   body:not(.woocommerce) dt {     font-weight: 700;     padding: 0 0 .1em;     margin: 0 4px 0 0;     clear: left; }   body:not(.woocommerce) dl>dt {     clear: left;     display: block; }

[YarosIK]

Hello Alex, this worked very nicely, thank you for your help  and a quick response !

[H.K. Latiyan]

Thanks for confirming, so marking the topic as resolved and closing the topic.

[Author]

Posts