VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: divined on May 26, 2017, 13:27:55 PM

Title: Change css for price description
Post by: divined on May 26, 2017, 13:27:55 PM
Hello everybody

I changed the length of the product short description in components/com_virtuemart/sublayouts/products.php to 200 characters. The product short description is now nicely showing on the product category page.

Unfortunately, the short description now falls on top of the price section. I found the relevant css section using Firebug on my page but I don't know which source file and <div> to alter in it. I'm using the defauilt vmbeez3 template.

Could someone please point me to the relevant css?

Thanks
Title: Re: Change css for price description
Post by: jenkinhill on May 26, 2017, 15:43:37 PM
One way is to add a suitable margin-bottom to p.product_s_desc  either by making an override of vm-ltr-site.css or adding the style to the end of the VMbeez personal.css file.
Title: Re: Change css for price description
Post by: divined on May 28, 2017, 11:55:46 AM
Nah.

Setting the bottom-margin to auto did nothing. Maybe it has to do with the padding property, since it relates to the text in the element.
Title: Re: Change css for price description
Post by: divined on May 28, 2017, 12:05:20 PM
This is how it currently looks and I have to admit it's ugly!

http://divined.homenet.org/sample.png (http://divined.homenet.org/sample.png)
Title: Re: Change css for price description
Post by: jenkinhill on May 28, 2017, 16:47:59 PM
A margin of auto would do nothing. If margins are confusing then try seeting a suitable min-height to p.product_s_desc   or in your override of products.php add a clear after the desc paragraph.
Title: Re: Change css for price description
Post by: divined on May 28, 2017, 19:41:38 PM
Thank you!

I used the min-height property and presto. Nonetheless, before I set this property I ran some experiments with the bottom-margin. Nothing worked although I tried values ranging from 20-80px. How does this bottom-margin work for inner elements?

I understand that bottom-margin for a root element means the distance from the bottom of the page. How does it work regarding the product_s_desc?