VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: blackrat999 on July 25, 2017, 15:57:05 PM

Title: A little CSS help please in cart module
Post by: blackrat999 on July 25, 2017, 15:57:05 PM
Is anyone able to give me a hand getting the text in the cart module to go to a new line if it is too wide please?
see attached for screenshot
I havent been able to get this right

Thanks for looking, he site is at https://ukgd.temp-gingerweb.com
VM 3.2.2

cheers
Title: Re: A little CSS help please in cart module
Post by: jenkinhill on July 25, 2017, 16:08:20 PM
I'd chop off the end of the text rather than go to a new line, but that's my preference, you may disagree. It's a;lready messy!

.vm_cart_products {
      overflow: hidden;
}
Title: Re: A little CSS help please in cart module
Post by: blackrat999 on July 25, 2017, 17:46:54 PM
Thanks that is a little better, the prices show over the top of the text though, if i turn the prices off the total doesnt show, is there any way to turn off the individual prices but leavce the total at the top?

many thanks
Title: Re: A little CSS help please in cart module
Post by: jenkinhill on July 25, 2017, 19:15:00 PM
No idea, as that is a commercial template which I have never used. You could ask the template developer.
Title: Re: A little CSS help please in cart module
Post by: driver_wedge on July 25, 2017, 19:29:36 PM
You could try this:

.uk-dropdown.uk-dropdown-small.cartmodulesmall.uk-dropdown-bottom {
    width: 430px !important;
    margin-left: -265px !important;
}

....but there must be a way to alter the element to adjust and allow the content to flow to the next line where necessary.
Title: Re: A little CSS help please in cart module
Post by: kogos on July 28, 2017, 09:39:42 AM
why don't you just use:

span.product_name {
    white-space: normal;
}


Edit: even better (see screenshot):

.product_name {
    display: block;
    margin-left: 18px;
    margin-top: -24px;
    max-width: 78%;
    position: relative;
    white-space: normal;
}
* + .uk-margin-small {
    border: none !important;
    margin-top: 10px !important;
}
.product_row {
    border-bottom: 1px solid white;
}

If you need to hide the price:
.prices.uk-float-right {
    left: 1000px;
    position: relative;
}
.uk-margin-small-left {
    left: -1000px;
    position: relative;
}

let us know if that worked
Title: Re: A little CSS help please in cart module
Post by: kogos on August 10, 2017, 15:04:23 PM
Did it work??? Any feedback???

Στάλθηκε από το LG-D855 μου χρησιμοποιώντας Tapatalk