Virtuemart Support :: Topic: Virtuemart product module 4 products in a row (1/1)

Welcome, Guest

TOPIC: Virtuemart product module 4 products in a row

Virtuemart product module 4 products in a row 7 years 5 months ago #14649

Andris Teivišs

Hello!

Can you please look at my site www.evereco.lv/lv/, first page, module "Virtuemart products" - jaunākas preces (latest products)

My problem is that if a product has long name, than module "Virtuemart products" shows only two productst in row, but must be 4 products in row, when i add a product with short name, than it shows 4 products in row.

Can you please help me to show four products in a row in Virtuemart product module no matter how long is product name.?administrator interface is not changed...

Try to see via firebug, but did not get the "css issue" or its something elese..

Thank you!

The topic has been locked.

Virtuemart product module 4 products in a row 7 years 5 months ago #14656

Kék-Menta Kft. HU23445464	Hi Andris Teivišs For me this is a problem www.kekmenta.hu web page, but they just missed the home page, it does not work correctly. The other page works. Best regards
	The topic has been locked.

Virtuemart product module 4 products in a row 7 years 5 months ago #14659

Support

Hi,

Normally, the "products in row" is calculated automatically based on "item count", "viewArea width" and "deviceWidth".

If you are non happy with this automatic calculation, you can use CSS to force the carousel plugin to have constant grid counts for certain devices.

To manually set the grid count, follow these steps:

1- Open this PHP file:
/templates/flexible_sportmart/html/mod_virtuemart_product/mod_virtuemart_product.php

2- Make sure you have set min and max values to cover all your needs (for example => min:1 & max:5)

visible: {
	min: 1,
	max: 5
},

3- Refresh the Joomla Cache (because joomla caches the module template PHP file)

4- Open this CSS file (or practically any CSS file)
/templates/flexible_sportmart/css/custom.css

5- and include these rules:

/* Don't touch this line */
.FlexibleFeatured ul li img { max-width:100% !important;}
/* Don't touch this line */
 
/* Extra Large Screens, 4K Screens */
@media (min-width : 1601px) {
   .FlexibleFeatured ul li { width:20%;}
}
 
/* Laptops, Desktops */
@media (max-width : 1600px) {
   .FlexibleFeatured ul li { width:25%;}
}
 
/* Tablets (iPad)*/
@media (max-width : 769px) {
   .FlexibleFeatured ul li { width:33%;}
}
 
/* Phones (iPhone 6) */ 
@media (max-width : 480px) {
   .FlexibleFeatured ul li { width:50%;}
}
 
/* Extra Small Phones (iPhone 3-4-5)*/ 
@media (max-width : 321px) {
   .FlexibleFeatured ul li { width:100%;}
}

If you carefully look at these CSS rules, they are pretty straight forward. These CSS rules above will let you have
- 5 products per row on large screens (i.e: 4K screens)
- 4 products per row on laptop, dektop
- 3 products per row on iPad
- 2 products per row on iPhone
- 1 products per row on extra smaller devices

You can modify the percentage values depends on your needs.

-- while testing this approach, make sure to refresh the page each time you change the browser resolution

Regards.

Last Edit: 7 years 5 months ago by Support.

The topic has been locked.