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

CommentFileSizeAuthor
#3 isabelleslighting_layout.PNG313.78 KBThomasIsabelle
example_collection.PNG300.69 KBThomasIsabelle
example_products.PNG475.42 KBThomasIsabelle
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

it@spp.solar’s picture

it@spp.solar CreditAttribution: it@spp.solar commented

The "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!

ThomasIsabelle’s picture

ThomasIsabelle CreditAttribution: ThomasIsabelle commented
Status: Active » Closed (fixed)

Thank 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

ThomasIsabelle’s picture

ThomasIsabelle CreditAttribution: ThomasIsabelle commented
FileSize
isabelleslighting_layout.PNG313.78 KB

Hello 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