Column Layout Grid

Hi,

I installed Column Layout Grid on Zen Cart 1.3.9h and it is working correctly, however the items in the categories are not aligned.. so i just want to know how i can align them so all the images are aligned and all the titles and the prices each aligned with the one next to it..

i have attached 2 images one from my site and the other one from another site. I would like to have my items organized as the latter one.

Thanks for your help!

It may be that the images on the site you referenced are all the same height, and yours are not. No way to tell for sure without a link to your site.

in that case is there a way that all of my images are resized to fit this or can I create a specified area for images to show so all images are automatically resized to fit that box?

the url to my site is www shoppingberg . com and the site that was well organized is www ampmfashion . com

thanks for your help!

Mahdi

Any help? I am still not able to solve this issue.. thanks!

Add to your stylesheet (any of them should work)

.product-list-col>.img {height: 200px;}
.product-list-col>.text>div:first-child {height: 50px;}

Adjust to taste.

Thanks for your help, however it did not work.. The template that i am using is from Template Monster.. I am not sure if that has to do anything with this not working..

When I tested it in Firefox at the bottom of your stylesheet.css it worked. What browser/version are you using? IE7 and earlier are severely lacking in CSS support and will not understand the given selectors. All modern browsers will interpret them correctly.

I am using FF latest version... the css code is still there you can actually see it.. i checked it on FF, Safari, and Chrome but in all browsers the images of my items are not aligned accurately.. you can actually see the problem more on this page

shoppingberg .com/index.php?main_page=index&cPath=87

If you see my specials page it is very organized and thats what i am trying to achieve with all of my pages.. is it possible to copy that layout to my other pages?

shoppingberg .com/?main_page=specials

The product listing page uses different classnames for its elements, so the CSS rules which work now for some of your list boxes will not apply to that page. As a matter of fact, the code for the product listing doesn't have some of the class "handles" that you would need to control it in the same way. You would need to customize the listing code, the way Flexible Product Listing does. You can find that attached to post 50 of its thread.

thanks! i wil check out it and hopefully find a solution to my problem...

Did anyone figure this out? I already had my images set to a unified size, the issue is with the product name. Some are longer than others- some take up two lines in the grid, some three and some four- and the rest of the elements displayed- image, price, etc.- follow immediately after.

What I'd like is for the elements under the name to display after a set amount of space (as if all names are four lines).

See how the Featured images on my homepage are out of alignment- avenue-r.com. And the same goes for Product Listing (click a category) and search results.

I'm using 1.39g and the All Business template 1.0.

R

Note that the first part of this is not relevant to Column Layout Grid, since that only affects the product listing page. However, you can make the product name a fixed height to help with alignment. Find in your stylesheet

/bof center boxes/
.product_title {font-size:110%;font-weight:bold;}

and change to

.product_title {font-size:110%;font-weight:bold; height: 5.8em;}
.box_image {height: 150px;}

adjusting as required.

Thanks! That did it for the Featured Items. I played around trying to do this for the Product Listing page (with the CLG mod), but came up short.