Messages

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!

Sorry, I can't upload more attachments.

iPhone 6 Screenshot. Display 4.7 inches 750 x 1334 pixels

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

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.

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

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

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?

Can anyone fix my problem? Thank you!

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