Displaying More Than Two Featured Products on Small Screens

Dear OpenCart Community,

I'm reaching out regarding a query I have concerning the default theme. Currently, it showcases two featured products per row, with a noticeable gap between each item.

Could someone kindly assist me in modifying this layout to display a minimum of three products per row? Any guidance or suggestions would be greatly appreciated.

Thank you in advance for your time and support.
https://i.imghippo.com/files/d8BIg1715420463.jpg

alamin69 wrote: ↑

Sat May 11, 2024 5:44 pm

Dear OpenCart Community,

I'm reaching out regarding a query I have concerning the default theme. Currently, it showcases two featured products per row, with a noticeable gap between each item.

Could someone kindly assist me in modifying this layout to display a minimum of three products per row? Any guidance or suggestions would be greatly appreciated.

Thank you in advance for your time and support.
https://i.imghippo.com/files/d8BIg1715420463.jpg

OC version. Please follow the forum rules prior to create a new topic.

As straightlight have said, please provide your OC version. And it doesn't seem like you're using OC4 - so this is probably the wrong forum for this.

alamin69 wrote: ↑

Sat May 11, 2024 5:44 pm

Dear OpenCart Community,

I'm reaching out regarding a query I have concerning the default theme. Currently, it showcases two featured products per row, with a noticeable gap between each item.

Could someone kindly assist me in modifying this layout to display a minimum of three products per row? Any guidance or suggestions would be greatly appreciated.

Thank you in advance for your time and support.
https://i.imghippo.com/files/d8BIg1715420463.jpg

But anyway, since this is more of a CSS issue rather than an issue with the OC version, just use the bootstrap grid system to achieve that - just set "col-sm-4" to the parent div of each product card and it should show 3 in a row. Also, I see that you've modified the CSS class "product-thumb" and gave it a fix width and height, which is causing the huge gaps and that is not responsive design as well. You've also added a CSS style to set ".product-layout.col-lg-3, .product-layout.col-md-3, .product-layout.col-sm-6, .product-layout.col-xs-12" to "25%", which forces all the products to appear in rows of 4 no matter the screen size.

Are you new to CSS? Because these CSS styling rules you've added don't really make any sense. You might also want to check out Bootstrap's documentation on how the grid system works (specifically v3.4 since that is the version your site is using) before attempting to customise your website's theme template.

Also looking for this, thank, Regards

riham12 wrote: ↑

Tue Oct 08, 2024 2:31 pm

Also looking for this, thank, Regards

This was already answered above. Change your CSS. Also, be aware that most developers here don't yet recommend OpenCart 4.0.2.3 for a live site as it still has too many bugs or known issues. Use 3.0.4.0 instead, or wait for the upcoming 4.1.0.0.

riham12

Spamming with hidden links

by mona wrote: ↑

Tue Oct 08, 2024 5:40 pm

riham12

Spamming with hidden links

Indeed in the commas. I'll remove the links and block user.