How do I add space in between product listing?

Mine look like they are all smooshed together. See example here:

http://scrappindeadgirls.com/bootique/index.php?main_page=index&cPath=80

Thanks in advance for the help :)

Find this line in your css:

td.productListing-data{ text-align: center;}

and add: padding: 0.5em;

to make it look like this:

td.productListing-data{ text-align: center; padding: 0.5em;}

Hope this helps.

It helped TONS...thank you so much!

Your welcome. That's what Zenning is all about.....people helping people. Just return the help back to the ZC community someday.

Is this in the stylesheet.css YOUR TEMPLATE? I am trying to find it and change it too.

Crooked_Halo:

Is this in the stylesheet.css YOUR TEMPLATE? I am trying to find it and change it too.

Yes, CH, it will be in "includes/templates/YOUR_TEMPLATE/css/stylesheet.css

The line in your css actually looks like this:

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
}

You can add: padding 0.5em; to it to make it look like this:

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
padding: 0.5em;
}

Since that particular reference is included with so many others, if you have problems elsewhere, you can simply remove the reference (.ProductListing-data) from that group, putting it on it's own like so:

.productListing-data {
padding: 0.5em;
}

Hope this helps.

Yay! You are a champion. Thank you.

You're welcome, CH. Nice looking site.........o.k., I'm a guy, I think I might have a biased opinion :D.

Just don't forget to help others when you learn your way around ZC, ok?

Haha! Thank you. I think I am doing okay for a total newbie... With the help of all the awesome info contained within the forum and FAQ's.

Yes you are. Didn't mean to imply otherwise. The Product listings look MUCH better now, but did you look below those at the New Products? They are all messed up, now. Thought that might happen. You might want to separate that particular reference, like I suggested earlier. Anytime you add a padding to that many things, something is bound to display incorrectly.

Wicked. Thanks. I wondered how I had buggered that up...

Hi! I use the column listing mod, and cannot for the life of me figure out how to add a vertical space, or row between items. I tried using this in the css file:

.productListing-data {
padding: 1em;
}

and no luck.

I also tried arbitrarily adding <br />'s into the column layout product_listing.php

and no luck.

Anybody have any idea how I might do this?

http://thepillaroom.com/Store/index.php?main_page=index&cPath=1_20

Thanks!
Brad

Brad, that should have worked, but sometimes what SHOULD work, don't.
If you'll take down your "Down for Maintenance" page, returning the shop to a normal state, I'll see if I can figure out what the problem is.

Whoops... Sorry about that. It's available now. I really appreciate your help. Thanks!

http://thepillaroom.com/Store/index.php?main_page=index&cPath=1_20

Brad

O.k. Brad (nice looking site, by the way), I think I see what you want to do. You just want a little more space between each row of products, right?

If that's the case, then add this to your stylesheet.css, somewhere below /list box contents/:

.centerBoxContentsProducts {
padding-bottom: 5.5em;
}

Of course, you might play with the numbers to get the desired spacing.

Seriously, you are the best ever. I dug through CSS, pruduct_listing, and the defines, and could not for the life of me find the right spot.

I appreciate you help, and thanks for the compliment. It's still a work in progress. We hope to have it up by the end of the week.

Have a great day!
Brad

pillaroom:

Seriously, you are the best ever. I dug through CSS, pruduct_listing, and the defines, and could not for the life of me find the right spot.

I appreciate you help, and thanks for the compliment. It's still a work in progress. We hope to have it up by the end of the week.

Have a great day!
Brad

Nope, you don't have that particular entry in your css. You will have to add it. You see, Brad, I use Firefox with the Web Developers add-on, which lets me not only view YOUR sites' css, but also EDIT it "on the fly". Uh......it's just for my viewing as long as I'm on your site.....not changing YOUR files, of course.

Find this in your stylesheet.css (This entry you DO have):

/list box contents/:

Then below that, you will actually ADD (as you DON'T have it) this entry:

.centerBoxContentsProducts {
padding-bottom: 5.5em;
}

Hope this helps.

I needed this advise as well. I made the changes and the product listing looked great but the New Products images were thrown out of wack. I solved this by peeling out the ```php
.productListing-data

adding it as a separate line with the values listed above by Get Em Fast to look like this ```php
.productListing-data {
    text-align: center; padding: 0.5em;
 }

The entire values looks like this now and all is well. Thanks guys.:clap:

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
	text-align: center; 
	}
	
.productListing-data {
    text-align: center; padding: 0.5em;
 }

Hi Guys,

I have read all the info you guys have posted about putting spaces between products in the category product listing page, but I would like to add a line (<hr/>) beteween the products.

http://www.skyhighmodels.co.nz/index.php?main_page=index&cPath=1 Have a look there, they are all squashed up. What I want it to look like is just a simple line between the products as shown here

Could anyone lend a hand?

Just want to says thanks for this. It's worked a treat. I have been pulling my hair out trying to achieve this.

To be honest, I rather be knitting!