AbanteCart Community

Shopping Cart Operations => Support => General Support => Topic started by: kurtakaosku on July 18, 2019, 09:57:50 AM

Title: how can I make 2 column per row on Product Page on Mobile View
Post by: kurtakaosku on July 18, 2019, 09:57:50 AM

hi there

how can I make 2 column per row on Product Page on Mobile View ?

thanks

Title: Re: how can I make 2 column per row on Product Page on Mobile View
Post by: Basara on July 18, 2019, 11:31:48 PM

Hello.

You need to change "cols" in your bootstrap template files
https://github.com/abantecart/abantecart-src/blob/master/public_html/storefront/view/default/template/pages/product/product_listing.tpl#L38
https://github.com/abantecart/abantecart-src/blob/master/public_html/storefront/view/default/template/blocks/product_list.tpl#L40

https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

Title: Re: how can I make 2 column per row on Product Page on Mobile View
Post by: kurtakaosku on July 19, 2019, 01:51:27 AM

hi Basara
Thanks for the reply

but what I mean is that the 2 colomn View in Mobile or Phone not in Desktop Mode

and the way you just gave is for desktop Mode

and my Question is what about for Mobile View ?

which "col" should I change the number ?

Title: Re: how can I make 2 column per row on Product Page on Mobile View
Post by: Basara on July 19, 2019, 02:06:51 AM

Please learn what is "bootstrap". You can also search forum your question was unswered before

Title: Re: how can I make 2 column per row on Product Page on Mobile View
Post by: kurtakaosku on July 19, 2019, 08:59:08 AM

hi Basara

I had succeded making 2 column in Mobile View by changing the "col-xs-" in

<div class="col-md-3 col-sm-6 col-xs-12">

into

<div class="col-md-3 col-sm-6 col-xs-6">

but the looking still not neat as seen on the attachment

can you please tell me if there is something wrong ?

the chart button on the left product column is crushed by the product on the right colomn then it is unseen
I think it has to do with left margin adjustment

Hope for your next help

Title: Re: how can I make 2 column per row on Product Page on Mobile View
Post by: kurtakaosku on July 23, 2019, 11:18:30 AM

Quote from: kurtakaosku on July 19, 2019, 08:59:08 AM

hi Basara

I had succeded making 2 column in Mobile View by changing the "col-xs-" in

<div class="col-md-3 col-sm-6 col-xs-12">

into

<div class="col-md-3 col-sm-6 col-xs-6">

but the looking still not neat as seen on the attachment

can you please tell me if there is something wrong ?

the chart button on the left product column is crushed by the product on the right colomn then it is unseen
I think it has to do with left margin adjustment

Hope for your next help

hope anybody here help me about this

thanks before