OpenCart Community

Please Help

All products on the home page appear very large , 1 product next to some

I want to change it to a size (related products) 2 product next to some

More information needed. Forum rules.

hello, thanks
I use the default template
opencart 3.0.3.2 arabic template
I just want to adjust the product size on the home page (start page)

 When you open your store from a mobile browser
The default mobile form shows one product per row, but I need to show two products in each row. What is the modification to that?
wish help

Assuming you are talking about the product page view on a mobile with a left and right module.

You need to change
catalog/view/theme/default/template/product/product.twig

{% set class = 'col-xs-8 col-sm-6' %}
CHANGE TO
{% set class = 'col-xs-6 col-sm-6' %}

Assuming you are talking about the featured module on the home page on a mobile.

You would need to change
catalog/view/theme/default/template/extension/module/featured.twig

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
CHANGE TO
<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6”>


OR set up a mobile view in css catalog/view/theme/default/stylesheet/stylesheet.css
@media (max-width: 768px){
.product-layout.col-lg-3.col-md-3.col-sm-6.col-xs-12 {
width: 50%;
}
}

OR if you ONLY WANT THIS IN THE featured module (or whatever) - you can add the directive to the twig file in enclosing <style> tag
<style>
@media (max-width: 768px){
.product-layout.col-lg-3.col-md-3.col-sm-6.col-xs-12 {
width: 50%;
}
}
</style>

yes talking about the featured module on the home page on a mobile
I change
catalog/view/theme/default/template/extension/module/featured.twig

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
CHANGE TO
<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6”>

BUT NOTHING CHANG ........

AND USED 2ND WAY>>>>>
set up a mobile view in css catalog/view/theme/default/stylesheet/stylesheet.css
@media (max-width: 768px){
.product-layout.col-lg-3.col-md-3.col-sm-6.col-xs-12 {
width: 50%;
}
}
NOW DONE
THANK YOU VERY MUCH
BUT HAVE NEW PROBLEM NOW . SIZE PRODUCT NOT SAME AT A MOBILE VIEW
HOW CAN FIX THAT

m.3ls7hat wrote: ↑

Tue Jul 30, 2019 11:52 am

yes talking about the featured module on the home page on a mobile
I change
catalog/view/theme/default/template/extension/module/featured.twig

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
CHANGE TO
<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6”>

BUT NOTHING CHANG ........

AND USED 2ND WAY>>>>>
set up a mobile view in css catalog/view/theme/default/stylesheet/stylesheet.css
@media (max-width: 768px){
.product-layout.col-lg-3.col-md-3.col-sm-6.col-xs-12 {
width: 50%;
}
}
NOW DONE
THANK YOU VERY MUCH
BUT HAVE NEW PROBLEM NOW . SIZE PRODUCT NOT SAME AT A MOBILE VIEW
HOW CAN FIX THAT

That's because the FAQ was unfollowed: viewtopic.php?f=176&t=200804#p718325