2 product columns on mobile

[SeizeTheDay]

Hi everyone. I want to show the products in 2 product column on mobile devices (include homepage and categories). What codes should I change? Could you help me? Thanks...

ps version: 1.7.6.4

website:  https://www.edirnemarket.com.tr

current view on mobile :

[Prescol]

You must edit the product.tpl file, and then modify according to the css framework your theme is using. If it is default them: bootstrap4

[SeizeTheDay]

11 hours ago, Prescol said:

You must edit the product.tpl file, and then modify according to the css framework your theme is using. If it is default them: bootstrap4

Hi @Prescol thank you for support but I still don't know what to do. If you want, I can send the product.tpl file and the css file to you. I don't know what codes to change.

[Prescol]

I will not edit code on demand. There are thousand of tutorials online and thousand of programmers ready to do it. Perform a search and you will see a lot of information, even in this forum.

[SeizeTheDay]

I didn't want you to do it. I just want to know which codes I need to change. so i said i can send the files. Anyway thank you. Is there anyone else who can help?

[Prescol]

Well, the difference between writing the code or telling you what to do and where is not so big...

Edited June 17, 2020 by Prescol (see edit history)

[SeizeTheDay]

anyone else*??

[luisleitaoaudio]

Big confusion

You have some css errors in your code

 

add this to your file custom.css

@media (max-width: 767px){
    .products .product-miniature {
            width:100%!important;
            float:left!important;
    }
}

To add custom css code do this:

 

 

 

after code you will see :

 

Edited June 19, 2020 by luisleitaoaudio (see edit history)

[pinwheel]

On 6/17/2020 at 12:36 AM, Prescol said:

I will not edit code on demand. There are thousand of tutorials online and thousand of programmers ready to do it. Perform a search and you will see a lot of information, even in this forum.

 

On 6/17/2020 at 1:24 AM, Prescol said:

Well, the difference between writing the code or telling you what to do and where is not so big...

There are no tutorials on how to do this for prestashop 1.7.6.   I'm not sure why you even answered the person, only to be snarky. There are plenty of other shopping carts, where the community help each other. 

[Prescol]

On 12/16/2020 at 8:31 PM, pinwheel said:

 

There are no tutorials on how to do this for prestashop 1.7.6.   I'm not sure why you even answered the person, only to be snarky. There are plenty of other shopping carts, where the community help each other. 

There are a lot of professional programmers ready to work. You only need to hire them. This is a forum, not a free service.  Value your work.

Edited December 18, 2020 by Prescol (see edit history)

[pinwheel]

4 hours ago, Prescol said:

There are a lot of professional programmers ready to work. You only need to hire them. This is a forum, not a free service.  Value your work.

Yes, I'm well aware that you are after shekels. Where other people are happy to help on this forum. 

[Julio Barbosa]

On 17/06/2020 at 04:41, SeizeTheDay said:

Eu não queria que você fizesse isso. Só quero saber quais códigos preciso alterar. então eu disse que posso enviar os arquivos. De qualquer forma, obrigada. Há mais alguém que possa ajudar?

Conseguiu fazer o que precisava?

[Mikael Mortensen]

I did the following on 1.7.8.8:

Open file

/themes/classic/templates/catalog/listing/product-list.tpl

change:

{include file='catalog/_partials/products.tpl' listing=$listing productClass="col-xs-12 col-sm-6 col-xl-4"}

to

{include file='catalog/_partials/products.tpl' listing=$listing productClass="col-xs-6 col-xl-4"}

AND

 

In the file:

themes/classic/templates/catalog/_partials/productlist.tpl

change

{if !empty($productClass)}{$productClass}{else}col-xs-12 col-sm-6 col-xl-4{/if}{/capture}

to

{if !empty($productClass)}{$productClass}{else}col-xs-6 col-xl-4{/if}{/capture}

 

That worked for me.

Best regards,
Mikael

 

Edited February 24, 2023 by Mikael Mortensen (see edit history)

[bartzmc]

Hello, I'm using 8.0.1 version with classic theme and it doesn't work.

Can it be done just with css?

Edited March 18, 2023 by bartzmc (see edit history)

[daninapoli]

On 24/2/2023 at 1:19 PM, Mikael Mortensen dice:

I did the following on 1.7.8.8:

Open file

/themes/classic/templates/catalog/listing/product-list.tpl

change:

{include file='catalog/_partials/products.tpl' listing=$listing productClass="col-xs-12 col-sm-6 col-xl-4"}

to

{include file='catalog/_partials/products.tpl' listing=$listing productClass="col-xs-6 col-xl-4"}

AND

 

In the file:

themes/classic/templates/catalog/_partials/productlist.tpl

change

{if !empty($productClass)}{$productClass}{else}col-xs-12 col-sm-6 col-xl-4{/if}{/capture}

to

{if !empty($productClass)}{$productClass}{else}col-xs-6 col-xl-4{/if}{/capture}

 

That worked for me.

Best regards,
Mikael

 

Ha funzionata anche a me...
che tu sappia è possibile modificare il modulo nuovi prodotti e prodotti popolari nello stesso modo ?

[RikMK]

On 2/24/2023 at 1:19 PM, Mikael Mortensen said:

I did the following on 1.7.8.8:

Open file

/themes/classic/templates/catalog/listing/product-list.tpl

change:

{include file='catalog/_partials/products.tpl' listing=$listing productClass="col-xs-12 col-sm-6 col-xl-4"}

to

{include file='catalog/_partials/products.tpl' listing=$listing productClass="col-xs-6 col-xl-4"}

AND

 

In the file:

themes/classic/templates/catalog/_partials/productlist.tpl

change

{if !empty($productClass)}{$productClass}{else}col-xs-12 col-sm-6 col-xl-4{/if}{/capture}

to

{if !empty($productClass)}{$productClass}{else}col-xs-6 col-xl-4{/if}{/capture}

 

That worked for me.

Best regards,
Mikael

 

Thank you, works.
Reminder for others: copy those files and paste them in your child theme folder to save after updates.

[DARKF3D3]

On 4/5/2023 at 1:18 PM, daninapoli dice:

Ha funzionata anche a me...
che tu sappia è possibile modificare il modulo nuovi prodotti e prodotti popolari nello stesso modo ?

In teoria dovrebbe già funzionare così perché entrambi i file (/catalog/listing/best-sales.tpl e /catalog/listing/new-products.tpl) richiamano sempre lo stesso file:
/catalog/listing/product-list.tpl

 

[MONASHOP]

@bartzmc I'm using 8.0.1 then it's working. You did an error for sure, read the instruction and do it again. 

[vinzo]

not working please help i read and do the same instruction again and again with no changes . prestashop 8.1

[DARKF3D3]

Have you cleared cache?

[vinzo]

YES ALL THE STEPS

 

[vinzo]

help please guys i still have the same problem i cant make it work 

[daninapoli]

On 1/5/2024 at 4:25 PM, vinzo dice:

help please guys i still have the same problem i cant make it work 

non ha funzionato con la modifica che ho fatto io ?

[mk2-pronat]

On 5/1/2024 at 5:25 PM, vinzo said:

help please guys i still have the same problem i cant make it work 

Hello,

It is so silly that PrestaShop doesn't have this feature but anyway, this worked for me. You also need to fiddle around with paddings and margins to make it right but if you are familiar with the browser console, you should be able to select specific items you want to adjust.

The good thing about this is that you don't need to edit any core files to make it work, you can just add the css to the Theme Editor in back-office.

@media only screen and (max-width: 600px) {
    .products.row > .col,
    .products.row > [class*="col-"] {
padding: 0rem;
max-width: 50%!important;
}

Hope this helps you.