0

I had a nightmare with New Products display on homepage with 1 row to display 5 products (columns) on magento 1.9.3

I have following code:

{{widget type="catalog/product_widget_new" display_type="new_products" products_count="5" template="catalog/product/widget/new/content/new_grid.phtml"}}

I made changes to style to make them look small like width: 19% so they all products fit in 1 row.

3 products appear on 1st row and another 2 went down to 2nd row. There is plenty of space on the right for other 2 products but something is wrong even though I tried everything xml update, css changes, and nothing works!!

I tried to add a widget too under CMS -> Widgets but same results. It seems widget new_grid.phtml is set to display 3 columns irrespective of css (19% I changed to make them smaller).

Anyone could help with this issue please..

None able to give some input?

Improve this question
3
  • Please update your site url
    – Magento 2
    Nov 10, 2016 at 9:53
  • could you please provide your site url
    – Murtuza Zabuawala
    Nov 17, 2016 at 5:00
  • I've solved the issue by upgrading magento to version 1.9.3, surprisingly it worked out of the box, without making any css changes.
    – harry
    Nov 17, 2016 at 10:46

4 Answers 4

Reset to default
1

In your theme's new product template on path

catalog/product/widget/new/content/new_grid.phtml

set value of $_columnCount to 5

Improve this answer
1
  • This doesnt work
    – harry
    Nov 12, 2016 at 20:52
1

Try this,

styles.css

line no: 4230 change left to 

    .products-grid > li:nth-child(3n+1) {
      clear: none;
    }
Line no:4314
.products-grid > li {
  margin-right: 1% !important;
  width: 19%;
}

enter image description here

Use parent class name so that it won't affect rest of the page

Improve this answer
4
  • thanks for the response, it works but in case i increase product number count from 5 to 10, the rest of items on second row won't appear correctly with responsive layout check.
    – harry
    Nov 12, 2016 at 18:11
  • Ya obviously it will got to second row because with main container let say 1000px how you fix all then better you set slider then it will work. can you please accept my answer so that it will useful for other
    – Magento 2
    Nov 13, 2016 at 9:42
  • Number 6th, and 7th product is aligned right on 2nd row and then there is another 3rd row which shows product number 8th, 9th and 10th which is aligned left. This is absolutely crazy so I have scrapped the entire style and theme and building it again because one problem leads to another. You did solved the problem for 5 items in a row though so thank you very much. :)
    – harry
    Nov 13, 2016 at 11:35
  • It's all about css problem only how many product you want to show in a row
    – Magento 2
    Nov 13, 2016 at 14:30
1

Just try to add

{{block type="catalog/product_list" limit="4" category_id="13" template="catalog/product/list.phtml"}}

To accomplish this using layout.xml then use setLimit

<action method="setLimit">4</action>

Eg

<block type="catalog/product_list" template="catalog/product/homepage-new-products.phtml">
    <action method="setLimit">4</action>
</block>
Improve this answer
0
0

The default widget grid.phtml is styled to display maximum of 5 <li> tag in a row. If you copied the grid.phtml into your new_grid.phtml it should work the same.

  1. To check if it is set to specific columns per row do inspect element on the browser. The structure should only have 1 <ol></ol> tag. If it has more then you need to rearrange your code.

  2. Styling problem:

    a. Make sure the combine width and margin of 5 <li> tag does not exceed to 100%

    b. I prefer setting the li tags to box-sizing: border-box;

    c. The items on the second row are not floated left because your items on the top row are not the same height. If the item 1 is taller than item 2 then item 6 will aligned under item 2. In this case u need to either: set fixed height of each item or used javascript to automatically match the height of each item in a row.

  3. The content of your <li> tags may have overlapped the container width. Even if you set the li to width: 19% but the content exceeds that width then the next items will be push forward. Try removing the contents of you li tag add plain text and reload the page.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.