Return to previous page

Space under variable attribute (cart) - by Roberts

This topic has 21 replies, 4 voices, and was last updated 9 years, 8 months ago ago by Jack Richardson

Roberts

Participant

March 31, 2016 at 14:49

Hello! There is a huge space under variable attribute in cart. I checked Legenda demo page and everything looks fine there.
Would you please take a look?

Here’s a cart without variable attribute
https://failiem.lv/down.php?i=99gc6uaf&view

Here’s a cart with variable attribute and big ugly space
https://failiem.lv/down.php?i=wc2s92rx&view

#119576 Copied Theme version: 2.11 WooCommerce version: 2.5.2

20 Answers
Jack Richardson

Support staff

March 31, 2016 at 16:05
Hello,

Try to use this code in custom.css file:

.shopping-cart-widget .cart-popup .products-small .product-item .variation { height: 30px; }

Best regards,
Jack Richardson.
#119593 Copied
Roberts

Participant

April 1, 2016 at 14:59

Thanks for the help Jack. Is it possible to display variable inline instead of new line?
For example quantity is displayed inline, but variables are dropped under?!

#119715 Copied
Jack Richardson

Support staff

April 1, 2016 at 18:43
Hello,

Please try to use this code in custom.css file:

.shopping-cart-widget .cart-popup .products-small .product-item .variation dd:nth-child(2n):after { padding-right: 10px; padding-left: 10px; } .shopping-cart-widget .cart-popup .products-small .product-item .variation dd, .shopping-cart-widget .cart-popup .products-small .product-item .variation { display: flex; } .shopping-cart-widget .cart-popup .products-small .product-item .variation { width: 100%; }

Best regards,
Jack Richardson.
#119758 Copied
Roberts

Participant

April 4, 2016 at 08:34

Thanks for response Jack,

Works great, but one more small thing – is it possible to align them in same height?
https://failiem.lv/down.php?i=s3cwat79&view

#119850 Copied

Eva Kemp

Participant

April 4, 2016 at 09:31

Hello,

Sorry, but I don’t see any issues with elements height.
What exactly do you want to align?

Regards,
Eva Kemp.

#119874 Copied

Roberts

Participant

April 4, 2016 at 09:42

Hello Eva, please see cart screenshot again and pay attention to red and green lines added
https://failiem.lv/down.php?i=u99xcnm2&view

#119876 Copied
Eva Kemp

Participant

April 4, 2016 at 10:15
Hello,

Try to use this code in custom.css:

.shopping-cart-widget .cart-popup .products-small .product-item .variation dd { padding-top: 1px; }

Regards,
Eva Kemp.
#119886 Copied
Roberts

Participant

April 4, 2016 at 11:04
Would this be the best way to line them in one height? I inspected both elements and found out they do not share the same “line height”. For example quantity variable is wrapped in <div> tag, but variation variable is wrapped in <p> tag

For variation name it’s

dt, dd { line-height: 25px; }

For variation variable it’s

p { line-height: 1.5; margin-bottom: 10px; }

Which is the reason they do not share the same height (25px vs 1.5)
#119897 Copied
Eva Kemp

Participant

April 4, 2016 at 12:05
Hello,

As you can see “p” is used as a general class, not only for cart popup window.
If you want to change its line height use this code:

.shopping-cart-widget .cart-popup .products-small .product-item .variation p { line-height: 20 px !important; }

Regards,
Eva Kemp.
#119915 Copied
Roberts

Participant

April 5, 2016 at 09:41
Hello, Eva. I think this is much better solution for aligning it. Many thanks for the code!

I have noticed one more thing about my cart. When I go over (with mouse cursor) product image in cart, it shows little stroke right next to it. It shows it on every product image in the cart when cursor is on it. Please take a look at my screenshot and try it yourself.
https://failiem.lv/down.php?i=wa48hufj&view

Also Jacks code to align variation variable in one line have this line

.shopping-cart-widget .cart-popup .products-small .product-item .variation { width: 100%; }

width: 100%; causes to drop variation under image. Can it be used without this line or it could cause problems with long texts?
#120041 Copied
Eva Kemp

Participant

April 5, 2016 at 10:14

Hello,

I’ve checked cart popup for that product and don’t see any line http://storage5.static.itmages.com/i/16/0405/h_1459847631_7247201_c04925905d.png .

You can remove the css code, but if there are many variations selected it may cause some alignment issues.

Regards,
Eva Kemp.

#120046 Copied

Roberts

Participant

April 5, 2016 at 10:19

I can see in your screenshot you haven’t “mouseover” the image. Otherwise it would be with opacity just like in my screenshot. Please take a look once more, thanks.

#120049 Copied
Eva Kemp

Participant

April 5, 2016 at 10:37
Hello,

Sorry for misunderstanding.
Please use this css code:

.shopping-cart-widget .cart-popup .products-small .product-item a:hover { color: transparent !important; }

Regards,
Eva Kemp.
#120053 Copied
Roberts

Participant

April 5, 2016 at 10:41

No problem. This code makes product title transparent when rolled over by mouse. Needs something else. Do you know what is this line appearing and what could cause it?

#120055 Copied
Eva Kemp

Participant

April 5, 2016 at 10:59
Hello,

I’ve changed the code to this:

.shopping-cart-widget .cart-popup .products-small .product-item .product-image:hover { color: transparent !important; }

Please clear browser cache and check now.

Regards,
Eva Kemp.
#120058 Copied
Robert Hall

Participant

April 5, 2016 at 11:10

Hello,

Please clarify in what browser you’ve checked it?
I still can’t see that line. See screenshot from my side. http://prntscr.com/aod5zq (when hover on).

Regards,
Robert Hall

#120060 Copied

Roberts

Participant

April 5, 2016 at 11:25

Please try to check now, because Eva’s code was added earlier. I am using Mozilla but line appears in Chrome too.

#120062 Copied
Robert Hall

Participant

April 5, 2016 at 11:44
Please add the following code in custom.css and check the issue.

.products-small .product-item .product-image, .products-small .product-item .product-image:hover { text-decoration: none; }

Regards,
Robert Hall
#120065 Copied
Roberts

Participant

April 5, 2016 at 12:35

Thanks Robert and Eva. last code did the trick and it’s all good/resolved now.

#120068 Copied

Jack Richardson

Support staff

April 5, 2016 at 12:42

Hello,

You are welcome.

Best regards,
Jack Richardson.

#120069 Copied
Viewing 21 results - 1 through 21 (of 21 total)