Post by alamin69 » 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

Newbie

Posts

Joined
Sat May 11, 2024 5:17 pm

Post by straightlight » Sat May 11, 2024 11:42 pm

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.

Dedication and passion goes to those who are able to push and merge a project.

Regards,
Straightlight
Programmer / Opencart Tester


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON

Post by softmonke » Mon May 13, 2024 12:47 pm

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.

Reach out to us at hello@softmonke.com for your OpenCart web development needs.


User avatar
Active Member

Posts

Joined
Tue May 23, 2023 4:42 am

Who is online

Users browsing this forum: No registered users and 1 guest