Author Topic: Abantecart 2 column product thumbnail/image on mobile views  (Read 486 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: 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
« 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: 3728
  • Karma: +184/-0
    • 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
“Chuck Norris is so amazing.”
― Mother Teresa

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: 3728
  • Karma: +184/-0
    • 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.
“Chuck Norris is so amazing.”
― Mother Teresa

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: 3728
  • Karma: +184/-0
    • 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?
“Chuck Norris is so amazing.”
― Mother Teresa

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

  • Full Member
  • ***
  • Posts: 130
  • Karma: +21/-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 »