adjust spacing on Column Layout Grid - HELP!

[shannda]

I have installed the Column Layout Grid, which works fantastic. However, I've been trying to figure out how to adjust the spacing between the product title and the price. I have removed the data which I don't want to display but my listing looks like this

image
product name


price

I'd like it to remove the giant space between "product name" and "price" so its looks like

image
product name
price

I've adjusted the css, edits the templates but I just don't see any changes. Has anyone been able to adjust this?

[kuroi]

Yes this can be adjusted but it's not easy.

The extra spacing arises because each line has a line break tag associated, including some that your are not displaying such as listing description. This means that you have multiple line breaks between some of the data that you are displaying.

You don't say what PHP or CSS changes you have made already, so it's difficult to advise you as to what to try next, but it this would be extremely difficult to resolve by changes to one or other alone, you will need to change both together, but it most certainly can be done.

[pilot]

I am having problems with spacing too.

I am trying to add more padding to the main product display to separate the products from each other.

When I try to add padding as below in CSS it works in rows but not in columns.

/* Products Listing Adding */
.productListing-odd {
background-color: #FFFFFFF;
height: 100px; /* the 100px should be greater than the (Image - Product Listing Height 80px) default in Admin */
padding: 0.2em 0em 0.2em 0em;
}

.productListing-even {
background-color: #F2F9FF;
height: 100px; /* the 100px should be greater than the (Image - Product Listing Height 80px) default in Admin */
padding: 0.2em 0em 0.2em 0em;
}

.productListing-data {
padding: 0.5em 0.2em 0.5em 0.2em;
border: 1px dotted #E6E6E6;
}

.itemTitle, .listingDescription, {
padding: 0 1.5em 0 0.6em;
text-align: left;

It seems that something is being overidden in column display?






}

[digidiva-kathy]

I just want to spread the columns apart...they're right next to each other with no space at all...where can I do this?

Here's an example...

http://www.digiscrapdivas.com/shoppi...=index&cPath=8

Thanks!

[seethrou]

Try add the following to your style sheet and adjust it.

.listingDescription {
padding-left: 10px;
padding-right: 10px;
}

And for the item's title may be you want to add, it is:
.itemTitle


Hope this helps.

.

[paulm]

image
product name


price

I'd like it to remove the giant space between "product name" and "price" so its looks like

image
product name
price

If I understand what you're asking I would:

1) Find the class/id

2) And add to the CSS:

.classname br {
line-height: 0;
}

(untested, replace .classname by the actual .class or #id)

An url would help.

[digidiva-kathy]

Seethrou's suggestion worked like a charm for my problem...thanks!!

[seethrou]

@ digidiva-kathy

Glad to hear that!


And for the column layout grid mod for the product listings, please also refer to:
Product Listing Layout Question

And the steps are:

For the spaces between Product Name and the price only.
i.e.
====
Asian Floral Mini Dress (The Item Title?)
^
This space only
v
$32.00

... more info

Add the codes below to your stylesheet and adjust the negative value of the margin-bottom to reduce the blank space.

.centerBoxContentsProducts .itemTitle {
margin-bottom: -1em;
}

And for other space, there are 2 or 3 <br /> in the template file of the mod. To reduce the spaces, it need to remove the <br />s in the mod file.

And I have not try the suggestions by paulm, will try it later.

.

[tolefairy]

Just stopped by to say that post #5 by seethrou was perfect! I made mine 25px instead of the 10px and I like the way it looks.

Thank you so much for providing a clear and concise solution to a problem I was trying to solve.

You are appreciated!

Shirley
http://www.shabbychiccottage.com

[AlexT]

Try add the following to your style sheet and adjust it.

.listingDescription {
padding-left: 10px;
padding-right: 10px;
}

And for the item's title may be you want to add, it is:
.itemTitle


Hope this helps.

.

I am also having problems with columns being too close. Tried your suggestion - it works, but affects only descriptions, not the titles of the products. Please see for yuorself: http://matryoshkastore.com/index.php...ex&cPath=10_22

Is there any way to space the titles?

Many thanks,
Alex