Column Layout Grid v2.x Support

**gjh42** · 6 Sep 2013, 05:33 AM

If you have set your image links to have a uniform height, and can guarantee that descriptions and all other lower elements will be uniform, that leaves only the item name. Will some products have names so long they wrap to two lines? Will you have some additional text or icon in certain products but not in all or most products? You may be able to set the product boxes to a fixed height and use CSS to keep the qty box at the bottom.

Identifying all the elements that might change can point to the best way to control the whole listing display.

**scuggler** · 6 Sep 2013, 06:20 PM

In the admin under product listing I have all the images set to be 80px high and in product_listing.php I have also limited the product titles to 25 characters to keep them from wrapping to two lines. I don't plan on adding any additional text or icons either, so it should all be uniform right now. Do you know how I might be able to set the product boxes in that way? also I totally forgot to mention that I have removed the quantity box and it is now the "Buy Now" button, really sorry for not mentioning that before.

Thank you again.

**gjh42** · 6 Sep 2013, 10:56 PM

Admin setting of images to 80px high will limit the maximum size, but it will not sretch smaller images to 80px. Do you have any images that are displaying at less than 80px? If so, you need to use the link height control CSS rule I posted before (#64 above).

What elements are you seeing variation in?

**scuggler** · 6 Sep 2013, 11:42 PM

There are a few that have a height less than 80px. Pretty much any product that has a height less than 80px is displaying the title, price, and buy now button higher in each row than products equal or greater than 80px. I applied that css in post #64 but it isn't working so well if the image is shorter than 80px.

**gjh42** · 7 Sep 2013, 01:49 AM

I just tested this in my v1.5.1 dev site (with CLG 2.3.1) and it worked as intended:

Code:

.centerBoxContentsProducts>a:first-child {display: block; height: 123px;}

**scuggler** · 7 Sep 2013, 02:04 AM

so in this code I should set the height to the height of my largest image? or should I set it to 80px since that is the limit set in the admin panel? Right now I have that code added to my css but it's set to 80px and it's not aligning the shorter imaged products.

**gjh42** · 7 Sep 2013, 03:56 AM

Maybe you have some other rule in your stylesheet following this one that is overriding it... Adding !important to the declaration may make a difference.

Code:

.centerBoxContentsProducts>a:first-child {display: block !important; height: 123px !important;}

If so, look for the rule that is interfering.

If that doesn't help, post a snippet of the view source containing one of the products in the listing. Maybe you have something odd there.

**scuggler** · 8 Sep 2013, 02:10 AM

so I did some more poking around and have discovered that for whatever reason, my stylesheet.css is being pulled from "classic" instead of my custom template. Your fix has worked now that I made the changes in the other css file. Now I just need to reduce the amount of space between the title and price. Thank you for sticking with me on this gjh42!

**gjh42** · 8 Sep 2013, 05:40 AM

If you have a custom template active, but the stylesheet in the /classic/ folder is being used, you have something very wrong with your code. It is likely to cause other unexplainable problems down the line. What do you have in your page "view source" code in the <head> section for <link rel="stylesheet" ... ? There will probably be a few of those - please post them so we can see exactly where your cart thinks it should be getting styles from. Alsp post any other folder paths that show a custom template name in the path. What is your template folder name?

**scuggler** · 8 Sep 2013, 05:24 PM

This is probably all my fault. I didn't (still don't really) understand the overrides thing and just started building onto the template_default. I tried renaming it a while back and it created a monster out of my site so I just left it alone.

<link rel="stylesheet" type="text/css" href="includes/templates/classic/css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/classic/css/stylesheet_css_buttons.css" />
<link rel="stylesheet" type="text/css" media="print" href="includes/templates/classic/css/print_stylesheet.css" />
</head>

All css is pointing to classic . . . is it even possible to rename my template at this point? I really effd this one up yeah?

Thread: Column Layout Grid v2.x Support

Thread Tools

Search Thread

Display

Re: Column Layout Grid v2.x Support

Re: Column Layout Grid v2.x Support

Re: Column Layout Grid v2.x Support

Re: Column Layout Grid v2.x Support

Re: Column Layout Grid v2.x Support

Re: Column Layout Grid v2.x Support

Re: Column Layout Grid v2.x Support

Re: Column Layout Grid v2.x Support

Re: Column Layout Grid v2.x Support

Re: Column Layout Grid v2.x Support

Similar Threads

Column Layout Grid - Shows only 1 column?

Column Layout Grid 2 products in 4 column display

Column layout grid for product listing - one column only

Column Grid Layout on 1.3.7 (single column problem)

Column Grid Layout - trouble with product listing/layout

Bookmarks

Bookmarks

Posting Permissions