[TUT] Place price below the rest

[Barq™]

Hi people,

When editing this theme I encountered the problem that when placing a long product name the price would drop down a little bit and looks very ugly.

So I came up with a solution to make it look beautiful at all times.
First you should edit the product-details class, and make it use the whole width:
You do this by adding ‘width: 100%;’ like below:

ul.products li.product .product-details {
  float: left;
  width: 100%;
}

And then make the price float left, like so:
‘float:left;’ – see below for the specific class.

ul.products li.product .price {
  float: left;
  font-size: 18px;
}

This will cause the price to drop below the rest of the information, align very nice and now you won’t have this hideous look anymore!

Good luck!

Cheers.

[Kyle – SUPPORT]

Thanks for taking the time to share this solution, I’m sure it will become helpful to some users 🙂

– Kyle

[cyclenoid]

Thank You! Great Solution – this helps a lot!
Mario

[Kyle – SUPPORT]

Great! 🙂