Can I make it dynamically change from 5 to 4 to 3 columns based on screen resolution?

[pjb923]

There is a quick and dirty way to do this that only requires a simple code change to /modules/YOUR_TEMPLATE/product_listing.php

First you need to set the column widths to a fixed value.
Around line 105 you will find where the column width is calculated based on the columns per row setting.
Below that line, and after the 2nd closing }, add the following:
$col_width = '150';

150 is the width in px that you want your column to be and can be changed accordingly.

Now on line 241, change the '%;' to 'px;'.

Next, you need to set "Product Listing - Columns Per Row" to match your products per page value in order to get rid of any extra linebreaks.

As the window gets smaller the number of boxes that can fit in the centercolumn will get smaller and they will wrap to the next line.

The only other thing I would recommend is adding a fixed height to your centerBoxContentsNew class to avoid misaligned rows.

[pjb923]

Sorry, I thought you were using the column grid module.

If you want to accomplish the same thing for the new products box, follow the same instructions but apply the changes to modules/YOUR_TEMPLATE/new_products.php.

[pisapona]

I havent gotten to the column grid module yet so i will try this on the new products first.

Ok before I destroy my new_products.php and cause myself to curse my moniter let me ask a couple more questions now that I reread this and am trying to do it

Next, you need to set "Product Listing - Columns Per Row" to match your products per page value in order to get rid of any extra linebreaks.

1st. Does this mean that If I want 5 columns at full screen Im only going to be able to show 5 products? ie 1 row, 5 columns, or am I limited to 12 items as this is the max column per row in the (Index Listing - new products columns per row).

As the window gets smaller the number of boxes that can fit in the centercolumn will get smaller and they will wrap to the next line.

2nd. I take this to mean- if I have 3 rows of 4 columns and the window shrinks I will then have 4 rows of 3 columns, and then 6 rows of 2 columns, and then 12 rows of 1 column. Is this correct?

because I can live with that if thats all I can do, But what I was really looking to achive is

full screen or high res. 3 rows of 5 columns
smaller window or lower res. 3 rows of 4 columns
even smaller window or lower res. 3 rows of 3 columns

Thank you in advance

[gjh42]

You would set the individual product width to something that looks good and gives 5 at 1280px; then you will have exactly as many of them per row as fit in the center column. In a 1600px wide screen there might be 7 or 8; in a 1280px screen, there could be 5, in 1024px there would be 4, etc. This would be a more flexible formula than you proposed.

For the new products centerbox, items per row is limited to 12 so you would want to set max products to 12 for neatness. This is not the new listing page and there could be other things like featured or specials centerboxes as well as a category or product listing on the page. There is no setting for minimum number of rows, so if 5 fit per row, you would get 2 full rows of 5 and a row with 2 products.

When you install Column Grid (easy and quick), you can set the number of products per row for the product listing as high as you want so there will be no awkwardness.

[pjb923]

1st. Does this mean that If I want 5 columns at full screen Im only going to be able to show 5 products? ie 1 row, 5 columns, or am I limited to 12 items as this is the max column per row in the (Index Listing - new products columns per row).

You can exceed 12 items, but after the 12th there will be a line break inserted and the 13th item will be forced into the next row. I can't figure out where the break is being inserted in the code, but it should be possible to manually remove it.

2nd. I take this to mean- if I have 3 rows of 4 columns and the window shrinks I will then have 4 rows of 3 columns, and then 6 rows of 2 columns, and then 12 rows of 1 column. Is this correct?

Yes, that is exactly how it would work.

because I can live with that if thats all I can do, But what I was really looking to achive is

full screen or high res. 3 rows of 5 columns
smaller window or lower res. 3 rows of 4 columns
even smaller window or lower res. 3 rows of 3 columns

This would require significantly more custom coding to dynamically change the maximum number of products displayed based on the current display size. You would probably need some javascript, as the display would need to be refreshed when the screen was sized. This goes beyond my skill level.

[pisapona]

This would require significantly more custom coding to dynamically change the maximum number of products displayed based on the current display size. You would probably need some javascript, as the display would need to be refreshed when the screen was sized. This goes beyond my skill level.

Again thank you for the reply. Going to work on this right now. as for the java, I'm doing this for free so.... I cant pay for a custom javascript. I will make the advice you gave me work. Thanks

[gjh42]

"after the 12th there will be a line break inserted and the 13th item will be forced into the next row. I can't figure out where the break is being inserted in the code, but it should be possible to manually remove it."

The output goes through /includes/templates/your_template/common/tpl_columnar_display.php, where this is inserted at the end of every row's output (near the bottom of the file):

<br class="clearBoth" />

You would need to selectively remove that when the new products centerbox is being processed and not otherwise.

An easier alternative would be to add to your stylesheet

#whatsNew br.clearBoth {display: none;}

[pjb923]

An easier alternative would be to add to your stylesheet

#whatsNew br.clearBoth {display: none;}

Very good advice. It never occurred to me that you could use display: none; on the breaks. Much easier than hacking up the tpl_columnar_display.php code.