Shopping Cart Operations > Tips and Tricks

Abantecart 2 column product thumbnail/image on mobile views

(1/3) > >>

HyAGMark:
Hi, I am new here! May ask if you have any tutorials about mobile views?

How to show the product in two columns instead of one column in the mobile screen? I'm using iPhone 6 and Samsung Note 3.

I do this tutorial: newbielink:http://forum.abantecart.com/index.php?topic=5087.0 [nonactive] and this newbielink:http://forum.abantecart.com/index.php?topic=6066.0 [nonactive] not done.

Please help me?

Thank you in advance.

Cheers - HyAGMark

HyAGMark:
Can anyone fix my problem? Thank you!

Basara:
Hello.
If your template use bootstrap you need to change col- number in your product_listing.tpl file

HyAGMark:


--- Quote from: Basara on July 17, 2018, 01:11:52 AM ---Hello.
If your template use bootstrap you need to change col- number in your product_listing.tpl file

--- End quote ---

I'm using a default template.


--- Quote ---/storefront/view/default/template/blocks/product_list.tpl
change line #32 <div class="col-md-3 col-sm-6 col-xs-12"> to <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
/storefront/view/default/template/pages/product/product_listing.tpl
change line #32 <div class="col-md-3 col-sm-6 col-xs-12"> to <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
--- End quote ---

Is this correct?

HyAGMark:

--- Quote ---/storefront/view/default/template/blocks/product_list.tpl
change line #32 <div class="col-md-3 col-sm-6 col-xs-12"> to <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">

/storefront/view/default/template/pages/product/product_listing.tpl
change line #32 <div class="col-md-3 col-sm-6 col-xs-12"> to <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
--- End quote ---

I edited these two product_list.tpl and product_listing.tpl and this is the outcome. Adjusting the width is pretty good but I don't know the solution. What is the right setting to this line? <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">




Thank you again.

Navigation

[0] Message Index

[#] Next page