The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 10-05-2012, 12:29 AM
Apae5's Avatar
Apae5 is offline
Junior Member
 
Join Date: Oct 2012
Posts: 4
Default

Related products - Longer product names mean uneven distribution visually


Showing related products is a great feature and I have made all changes style wise using css. However, with some products (services in my case) having longer file names, the visual distribution is uneven. For instance, out of four related products, the latter two take up less space, height wise due to smaller product (service) titles, than the first two. Is there a way for me to force an extra line of blank space in the latter two only?
I'm predicting no, but figured it can't hurt to ask as I may have missed something.
Attached Thumbnails
Click image for larger version

Name:	ecwid.png
Views:	305
Size:	309.1 KB
ID:	1499  
  #2  
Old 10-08-2012, 06:04 PM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,765
Default

One of the easiest ways to achieve that is to set a fixed height to the product name. This may be done by modyfying an existing rule in your custom CSS theme (you already customize the look of that element) or adding the following new rule:

Code:
.ecwid-productBrowser-relatedProducts .ecwid-productBrowser-productNameLink {
height: 2em;
}
This will set the height of all product name elements to apprx. the size of 2 lines of text in the given area. This will result in an additional space between product name and SKU in cases, where product name is just one line of text, but the prices will be all on 1 baseline.
The Following 2 Users Say Thank You to Eugene Rimmer For This Useful Post:
Apae5 (10-08-2012), Judith M (04-07-2016)
  #3  
Old 10-08-2012, 06:19 PM
Apae5's Avatar
Apae5 Apae5 is offline
Junior Member
 
Join Date: Oct 2012
Posts: 4
Default

Eugene, that works perfectly. Thank you very much!
  #4  
Old 11-16-2012, 04:56 PM
Out of This World's Avatar
Out of This World Out of This World is offline
 
Join Date: Mar 2010
Posts: 126
Default

Sorry to hijack your thread... but how did you get the product name and SKU to center within each related product's block? It's driving me crazy that the default is left-justified (while Price is centered??), and I can't figure out how to center those two styles.
  #5  
Old 11-16-2012, 07:59 PM
Apae5's Avatar
Apae5 Apae5 is offline
Junior Member
 
Join Date: Oct 2012
Posts: 4
Default

From what I can tell, this is all I've done:


Code:
/* Product name links */
div.ecwid-productBrowser-productsGrid-productBottomFragment div.ecwid-productBrowser-productNameLink {
    text-align: center;


Code:
/* Product sku */
div.ecwid-productBrowser-productsGrid-productBottomFragment div.ecwid-productBrowser-sku {
    text-align: center;

Code:
/* Product price */
div.ecwid-productBrowser-productsGrid-productBottomFragment div.ecwid-productBrowser-price {
    text-align: center;
    margin: 5px 0px 0px 0px;


Hope that helps.
  #6  
Old 11-16-2012, 09:31 PM
Maristany's Avatar
Maristany Maristany is offline
Senior Member
 
Join Date: Dec 2009
Posts: 419
Default

There's also
Code:
.ecwid-productBrowser-relatedProducts .ecwid-productBrowser-productNameLink,
.ecwid-productBrowser-relatedProducts .ecwid-productBrowser-sku {
    text-align: center;
}
The Following User Says Thank You to Maristany For This Useful Post:
Jason Poteet (11-20-2012)
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
css, related products, spacing

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:23 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.