How to to get the prices centered in the node:teaser with commerce price savings formatter? I am pretty new to drupal and I have a problem with formatting the price in my drupal shop. I am using commerce sale price -module and commerce price savings formatter -module.

In the default view, the price shows ok, in the right position. But in the view (node:teaser) it shows the prices in the wrong position. I have tried everything to get the prices centered (modifying the css), but they are still on right side all the time. I would also like to remove the line above the price if its possible.

Here is the link to my shop: http://www.oladevelopment.fi/mifuko/content/home-shop

Ant ideas on how I can get the prices shown in the way I want?
Add this in your CSS:

table.commerce-price-savings-formatter-prices{
width: 100%;
}


Also, you can add:

.commerce-price-savings-formatter-price .price-amount{
display: block;
padding-top: 5px;
}


Prices looks much better with this.

If width:100% doesn't work try to use width:100% !important; because width is already defined in module's theme.

To remove line above price add this to your CSS:

table.commerce-price-savings-formatter-prices tbody{
border-top:0;
}


Also, if it doesn't work, use border-top:0 !important; instead border-top:0;

To minimize the space between prices add to CSS:

table.commerce-price-savings-formatter-prices-down{
margin: 0 auto;
width: 50%;
}


Important part here is width: 50%;, change this percent to see which space you want to have, the more percent is the more space will be between prices. Again, use !important if doesn't work.

You can also add this to your CSS to make prices look better (to make it equal at the bottom edge):

table.commerce-price-savings-formatter-prices-down tr td{
vertical-align: bottom;
} 


Don't forget to clear cache.