Author Topic: Abantecart 2 column product thumbnail/image on mobile views  (Read 11431 times)

Offline HyAGMark

  • Newbie
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile
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
« Last Edit: July 16, 2018, 11:52:25 PM by HyAGMark »

Offline HyAGMark

  • Newbie
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile
Re: Abantecart 2 column product thumb on mobile views
« Reply #1 on: July 16, 2018, 11:33:04 PM »
Can anyone fix my problem? Thank you!

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5774
  • Karma: +274/-2
    • View Profile
Re: Abantecart 2 column product thumbnail/image on mobile views
« Reply #2 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

Offline HyAGMark

  • Newbie
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile
Re: Abantecart 2 column product thumbnail/image on mobile views
« Reply #3 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?

Offline HyAGMark

  • Newbie
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile
Re: Abantecart 2 column product thumbnail/image on mobile views
« Reply #4 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.

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5774
  • Karma: +274/-2
    • View Profile
Re: Abantecart 2 column product thumbnail/image on mobile views
« Reply #5 on: July 18, 2018, 02:04:27 AM »
Test your solution in different screen sizes.

Offline HyAGMark

  • Newbie
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile
Re: Abantecart 2 column product thumbnail/image on mobile views
« Reply #6 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

« Last Edit: July 18, 2018, 11:52:20 PM by HyAGMark »

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5774
  • Karma: +274/-2
    • View Profile
Re: Abantecart 2 column product thumbnail/image on mobile views
« Reply #7 on: July 19, 2018, 01:14:25 AM »
Hi. But you already found solution when change a col.
What solution you ask?

Offline HyAGMark

  • Newbie
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile
Re: Abantecart 2 column product thumbnail/image on mobile views
« Reply #8 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.


 






« Last Edit: July 19, 2018, 11:15:19 AM by HyAGMark »

Offline HyAGMark

  • Newbie
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile
Re: Abantecart 2 column product thumbnail/image on mobile views
« Reply #9 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

Offline Sam_78

  • Sr. Member
  • ****
  • Posts: 270
  • Karma: +42/-1
    • View Profile
Re: Abantecart 2 column product thumbnail/image on mobile views
« Reply #10 on: July 19, 2018, 11:35:40 AM »
Share the link to your site and we can inspect it.

Offline HyAGMark

  • Newbie
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile
Re: Abantecart 2 column product thumbnail/image on mobile views
« Reply #11 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!
« Last Edit: July 20, 2018, 02:30:33 PM by HyAGMark »

Offline diana987

  • Newbie
  • *
  • Posts: 1
  • Karma: +0/-0
    • View Profile
    • curitas
Re: Abantecart 2 column product thumbnail/image on mobile views
« Reply #12 on: September 20, 2020, 10:51:29 PM »
I don't know how to do it either

Offline rabindragupta

  • Newbie
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile
Re: Abantecart 2 column product thumbnail/image on mobile views
« Reply #13 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.

 

Powered by SMFPacks Social Login Mod