AbanteCart Community

Shopping Cart Operations => Tips and Tricks => Topic started by: HyAGMark on July 16, 2018, 01:09:03 PM

Title: Abantecart 2 column product thumbnail/image on mobile views
Post by: HyAGMark on July 16, 2018, 01:09:03 PM
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: http://forum.abantecart.com/index.php?topic=5087.0 and this http://forum.abantecart.com/index.php?topic=6066.0 not done.

Please help me?

Thank you in advance.

Cheers - HyAGMark
Title: Re: Abantecart 2 column product thumb on mobile views
Post by: HyAGMark on July 16, 2018, 11:33:04 PM
Can anyone fix my problem? Thank you!
Title: Re: Abantecart 2 column product thumbnail/image on mobile views
Post by: 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
Title: Re: Abantecart 2 column product thumbnail/image on mobile views
Post by: HyAGMark on July 17, 2018, 09:28:14 AM

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

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

Is this correct?
Title: Re: Abantecart 2 column product thumbnail/image on mobile views
Post by: HyAGMark on July 17, 2018, 11:25:21 AM
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">

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.
Title: Re: Abantecart 2 column product thumbnail/image on mobile views
Post by: Basara on July 18, 2018, 02:04:27 AM
Test your solution in different screen sizes.
Title: Re: Abantecart 2 column product thumbnail/image on mobile views
Post by: HyAGMark on July 18, 2018, 08:20:23 PM
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

Title: Re: Abantecart 2 column product thumbnail/image on mobile views
Post by: Basara on July 19, 2018, 01:14:25 AM
Hi. But you already found solution when change a col.
What solution you ask?
Title: Re: Abantecart 2 column product thumbnail/image on mobile views
Post by: HyAGMark on July 19, 2018, 10:56:44 AM
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.


 






Title: Re: Abantecart 2 column product thumbnail/image on mobile views
Post by: HyAGMark on July 19, 2018, 11:18:41 AM
Sorry, I can't upload more attachments.

iPhone 6 Screenshot. Display 4.7 inches 750 x 1334 pixels
Title: Re: Abantecart 2 column product thumbnail/image on mobile views
Post by: Sam_78 on July 19, 2018, 11:35:40 AM
Share the link to your site and we can inspect it.
Title: Re: Abantecart 2 column product thumbnail/image on mobile views
Post by: HyAGMark on July 19, 2018, 12:24:45 PM
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!
Title: Re: Abantecart 2 column product thumbnail/image on mobile views
Post by: diana987 on September 20, 2020, 10:51:29 PM
I don't know how to do it either
Title: Re: Abantecart 2 column product thumbnail/image on mobile views
Post by: rabindragupta on December 08, 2023, 11:57:34 AM
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.