Hello,
I have installed the demo store with my Kickstart Commerce 2 installation. What a nice distribution!
I am making some small modifications for the needs of my store. I want the Facet API blocks to be shown in "collection/*", not just the default "products". For some strange reason, though the teaser items showing on the nodes in "products" appear to be the exact same size as the teaser items showing on the nodes in "collection/*", yet the ones in "products" are being display in three columns whereas the ones in "collection/*" are being display in only two columns? How can this be?
See attached examples "example_collection" and "example_products".
Thank you for your help!
Tom
Comment | File | Size | Author |
---|---|---|---|
#3 | isabelleslighting_layout.PNG | 313.78 KB | ThomasIsabelle |
example_collection.PNG | 300.69 KB | ThomasIsabelle | |
example_products.PNG | 475.42 KB | ThomasIsabelle |
Comments
Comment #1
it@spp.solar CreditAttribution: it@spp.solar commentedThe "products" display page has additional css in the commerce_kickstart_style.css. The problem is that omega kickstart's global.css states all product images should have a right-padding of 5px, and the css in commerce_kickstart_style.css negates that for the 3rd item on the page.
Simple fix though, after the following line (310) in the commerce_kickstart_style.css:
view-collection-taxonomy-term .view-content .item-list .products-per-collection li.views-row {
display: inline;
height: auto;
margin: 0;
padding-right: 5px;
/* LTR */
padding-bottom: 30px;
width: 230px; }
add this:
.view-collection-taxonomy-term .view-content .item-list .products-per-collection li.views-row:nth-child(3n) {
padding-right: 0;
}
Enjoy!
Comment #2
ThomasIsabelle CreditAttribution: ThomasIsabelle commentedThank you, sunrotor!
I was hoping that the theme had a way to do this "out-of-the" box, but it works perfectly as you said.
Thank you big time! This saves for from having to use another theme!
Best,
Tom
Comment #3
ThomasIsabelle CreditAttribution: ThomasIsabelle commentedHello Sunrotor,
Running into a snag again. Your fixed worked to a point.
I now get three items in a row, the fourth item drops to a new row by itself (see example screen image). The fifth, sixth, and seventh items drop to a new row. The eighth item drops to a new row by itself. And this pattern repeats. The ninth, tenth, eleventh item drop to a new row, and so on.
So I went back to the same css file and hacked it some more. :-)
By changing line 321 from . . .
.view-collection-taxonomy-term .view-content .item-list .products-per-collection li.views-row:nth-child(4n+5) {
. . . to . . .
.view-collection-taxonomy-term .view-content .item-list .products-per-collection li.views-row:nth-child(4n+100) {
. . . it solves the issue up to the 100th item. Since the pager is set under that, I should be ok.
Tom