Abantecart 2 column product thumbnail/image on mobile views

[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]

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

I'm using a default template.

/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">

Is this correct?

[HyAGMark]

/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">

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.

[Basara]

Test your solution in different screen sizes.

[HyAGMark]

Test your solution in different screen sizes.

I'm stuck! Please help if you have solution?


I like same like this one 2 columns on mobile view, owned by full member @Geoffrey

[Basara]

Hi. But you already found solution when change a col.
What solution you ask?

[HyAGMark]

The alignment is not okay.

See the screenshot below, the product image width does not fit on my screen and that's my problem.


If possible to do that to abantecart, I will use it for my online shopping because abantecart is better e-commerce than others. Many users are using android and iOs phone so need to fix 2 columns width for mobile. I'm happier if somebody helps me to do that. For now, I'm not using Android or iOs app. Thank you very much. More power AC Community!



Samsung GALAXY Note 3 Neo, Display 5.5 inches 720 x 1280 pixels



You may see the difference.


 

[HyAGMark]

Sorry, I can't upload more attachments.

iPhone 6 Screenshot. Display 4.7 inches 750 x 1334 pixels

[Sam_78]

Share the link to your site and we can inspect it.

[HyAGMark]

Just want 4 columns in desktop, 2 in tablet and 2 in mobile.

I edited 2 on mobile now but the problem is the width of the product image.



Thank you!

[diana987]

I don't know how to do it either

[rabindragupta]

Hi, The changes suggested is working in default not in BOOTSTRAP5.
Only the problem is both thumbnails in one column not in same size. Rest is fine.
But I am using Bootstrap5 as a default theme in which the suggested change in code is not working. The code is changed from '    <div cls="coasl-12 col-sm-9 d-flex flex-column"> ' to <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"> location public_html/extention/bootstrap5/storefront/view/bootstarp5/template/blocks/  and in pages .
Can you please advise me 2 column product thumbnail/image on mobile views for BOOTSTRAP5 theme.