Help with products layout in grid view

You should be able to do it via the following path within your Magento Admin --> system > configuration > catalog (left side menu) > list mode (drop down)

In addition, here is a video tutorial that may be helpful to you . . .

http://www.youtube.com/watch?v=sPED14EHoJU

Sorry that didn’t solved my problem since I want it to look like grid.

The problem is the products are not all followed.. there is 3 lines and it look like this:

4 in first Line
1 in second line
3 in third Line

And i want it to be

4 in first line
4 in second line

Hi

When I access this page: http://www.pinkstrawberry.pt/fringe.html

I see that it displays 4 products for each line: http://i.imgur.com/y8fBvey.png

Could you send us screenshot of how you want to achieve here?

Well.. :S

Don’t know why but it’s showing up fine now…. Thanks

I have the same issue with some of my products as stated above.

Not all categories end up looking like this. I can’t tell what’s causing it.

Any help would be greatly appreciated.

Attachment 28958

Hi thedailyspank,

Can you share here your url where the issue seen ?

I do not have the site live at this point because of that layout issue and an issue with the JM_products module causing the mysql database to be fully utilized (I have ~60,000 products). I’ll see about cloning the VM and getting that to you in a little while.

ok mate, get back to me with the url for taking a look at the issue

I figured out what’s triggering it. Multiple lines in the product title. I found Safari would do this more often than FireFox with the same page being loaded. It also does not happen with all multi-line product titles.

See pics for example.

Attachment 29622 Attachment 29623

hi mate,

you can open the css file of skin/frontend/default/jm_lingerie/css/styles.css look for this css rule

HTML Code:

  .products-grid li.item {
  float: left;
  margin: 0 0 20px !important;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 33%;
  z-index: 1;
}

here you can try to set a height value for the rule, for example height:350px so change the above to

HTML Code:

  .products-grid li.item {
  float: left;
  margin: 0 0 20px !important;
  overflow: hidden;
  padding: 0;
  height:350px;
  position: relative;
  width: 33%;
  z-index: 1;
}

I hope it helps !

That appears to have worked for the main products, but the sidebar for the "Latest Products" is now 350px tall as well…

Hi mate,

you can try with this css rule

HTML Code:

 .category-products .products-grid li.item {
  float: left;
  margin: 0 0 20px !important;
  overflow: hidden;
  padding: 0;
  height:350px;
  position: relative;
  width: 33%;
  z-index: 1;
}

I hope it helps !

With those changes, it created an issue where the "Latest Products" on the left were also being set with a height of 350px. To remedy this, I edited /app/design/frontend/default/jm_lingerie/template/joomlart/jmproducts/list.phtml, line 26, to remove "item" from the class. This made it so the left hand items are closer together and the main items do not have issues flowing.

Change this line in /app/design/frontend/default/jm_lingerie/template/joomlart/jmproducts/list.phtml:
Code:

<li class="item <?php if ($j==$_rowCount) : echo "item-row-last"; endif; ?> <?php if(($i-1)%$config['perrow']==0): ?> first<?php elseif($i%$config['perrow']==0): ?> last<?php endif; ?>" <?php echo $width;?>>

Just remove "item"

Code:

<li class="<?php if ($j==$_rowCount) : echo "item-row-last"; endif; ?> <?php if(($i-1)%$config['perrow']==0): ?> first<?php elseif($i%$config['perrow']==0): ?> last<?php endif; ?>" <?php echo $width;?>>

With the CSS set to a fixed height and the phtml file edited to not include the "item" class, it works as expected.

Before:
Attachment 31477

CSS fix only (note the "Latest Products" on the left):
Attachment 31478

CSS and editing of column.phtml:
Attachment 31479

I’m just wondering if there will be issues down the road or if it is finally fixed…

Hi mate,

I think this would be fine, let me know if any problems occur there