Post by m.3ls7hat » Fri Jul 26, 2019 7:04 am

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

Newbie

Posts

Joined
Tue Jul 02, 2019 9:26 am

Post by straightlight » Sat Jul 27, 2019 6:57 pm

More information needed. Forum rules.

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 m.3ls7hat » Mon Jul 29, 2019 8:09 am

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

Newbie

Posts

Joined
Tue Jul 02, 2019 9:26 am

Post by by mona » Mon Jul 29, 2019 10:20 am

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' %}

Attachments

Screen-Shot-2019-07-29-2.jpg

Screen-Shot-2019-07-29-2.jpg (47.2 KiB) Viewed 789 times

Screen-Shot-2019-07-29-1.jpg

Screen-Shot-2019-07-29-1.jpg (36.26 KiB) Viewed 789 times


DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.


https://www.youtube.com/watch?v=zXIxDoCRc84


User avatar
Expert Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by by mona » Mon Jul 29, 2019 10:52 am

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>

Attachments

Screen-Shot-2019-07-29-4.jpg

Screen-Shot-2019-07-29-4.jpg (11.09 KiB) Viewed 777 times

Screen-Shot-2019-07-29-3.jpg

Screen-Shot-2019-07-29-3.jpg (68.01 KiB) Viewed 777 times


DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.


https://www.youtube.com/watch?v=zXIxDoCRc84


User avatar
Expert Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by m.3ls7hat » 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

Newbie

Posts

Joined
Tue Jul 02, 2019 9:26 am

Post by straightlight » Tue Jul 30, 2019 8:40 pm

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

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
Who is online

Users browsing this forum: No registered users and 157 guests