Datafeedr Support Forums  

Go Back   Datafeedr Support Forums > Current Version (V3) Forum > Problems
Home Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Important - The support forums are now in "read-only" mode as we transition to an alternative help desk solution. Feel free to contact us here with any of your questions or search the forums for an existing solution.
 
 
Thread Tools Search this Thread Display Modes
  #1  
Old January 10th, 2011, 10:09 PM
patagonia patagonia is offline
 
Join Date: May 2009
Posts: 506
Default Product List Layout Issues

Ok last problem for tonight...
Any ideas why the products are all over the place?
http://www.batbarmitzvahinvitations....ah-invitations

It doesn't seem to be the image sizes, as I changed those to no affect.
Something to do with the heights. When ever there are different heights next to each other, it messes up the layout.
  #2  
Old January 10th, 2011, 10:20 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

This is because some product titles take up 1 line, some take up 2 lines and some take up 3 lines. If you don't hide the "overflow", then creating a grid from CSS is nearly impossible.

You should apply this CSS code:

Code:
#view .pl h4
{
	line-height: 1.4em;
	height: 2.8em;
	overflow: hidden;
}
Basically, what that says is:

Each line of the product title should be 1.4em's.
The total height that the product title is allowed is 2.8em's.
If the product title needs more room than allowed, hide the overflow.

If you edit that code, make sure that height is ALWAYS a multiple of line-height.

Example, if you change line-height to 1.2em, you should change height to 1.2em or 2.4em or 3.6em or 4.8em. Each multiple represents 1 more line of the title that will be displayed. So, if you want to display your title over 4 lines, the code should read:

Code:
#view .pl h4
{
	line-height: 1.4em;
	height: 5.6em;
	overflow: hidden;
}
  #3  
Old January 11th, 2011, 12:37 PM
patagonia patagonia is offline
 
Join Date: May 2009
Posts: 506
Default

Thanks for the code Eric. Works a treat. I changed the h2 tag to h4, as my h2 title for some reason is massive, but used elsewhere.

Are you able to, when you get a chance, add some comment code to the default .css file, in the documents, to point out what some of the bits do, so we can change it ourselves?
  #4  
Old January 11th, 2011, 12:43 PM
ejfpro ejfpro is offline
 
Join Date: Dec 2010
Posts: 41
Default

I had this issue also. Thanks for the fix
  #5  
Old January 11th, 2011, 01:01 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Quote:
Originally Posted by patagonia View Post
Thanks for the code Eric. Works a treat. I changed the h2 tag to h4, as my h2 title for some reason is massive, but used elsewhere.

Are you able to, when you get a chance, add some comment code to the default .css file, in the documents, to point out what some of the bits do, so we can change it ourselves?
There is already some comment code in there. I won't add any more comments to the file, to keep filesizes small, but I might document it in the docs area once i get some time. Here's a brief introduction to the most common settings:
Code:
#view	surrounds everything in a store
.col1	creates a 1 column layout in a single row
.col2	creates a 2 column layout in a single row
.col3	creates a 3 column layout in a single row
.col4	creates a 4 column layout in a single row
.pl 	product list
.t1	template 1 (for product list)
.t2	template 2 (for product list)
.t3	template 3 (for product list)
.bdr	border 
.thmb	thumbnail
.prc	price
.desc	description
.btns	buttons
.sp 	single product
.lc	left column
.rc	right column
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
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

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
... make product images bigger in the product list? ayorofrance Questions 10 January 9th, 2011 10:22 PM


All times are GMT -5. The time now is 02:07 AM.


Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.