2 product columns for mobile? PS 1.7.1.2?

[somchay]

I would like to change my page to display two columns of products on mobile devices How to?

[angah]

i want display two column product on mobile responsive, anybody can help?

[Andrej Stas]

Try this:

 

go to your_theme/assets/custom.css

 

and insert there this code:

 

@media (max-width:767px){.container{width:auto; } }

 

 

Reset your cache and check the result. You should see your eshop on phones much wider and there should be also enough space for 2 products in a row.

Edited August 8, 2017 by Andrej Stas (see edit history)

[sengok]

hello andre,

 

where i can find link to customs.css coz i follow ur link i dont see the link.

thanks before.

 

enda

[sengok]

Try this:

 

go to your_theme/assets/custom.css

 

and insert there this code:

 

@media (max-width:767px){.container{width:auto; } }

 

 

Reset your cache and check the result. You should see your eshop on phones much wider and there should be also enough space for 2 products in a row.

i cant find this link .. please help

thank you

[delfost]

same here

 

plz help

[lisandronob]

Hi guys, isnt a link, is a path for your css file. A patch in your computer, you need to know where is installed Prestashop (folder)

 

Basically:

your_theme/assets/custom.css 

[dani algarra]

On 8/8/2017 at 10:32 AM, Andrej Stas said:

Try this:

 

go to your_theme/assets/custom.css

 

and insert there this code:

 

@media (max-width:767px){.container{width:auto; } }

 

 

Reset your cache and check the result. You should see your eshop on phones much wider and there should be also enough space for 2 products in a row.

 

Hello,

In which row i need to insert the code?

 

Thanks

[DARKF3D3]

On 8/8/2017 at 10:32 AM, Andrej Stas dice:

Try this:

 

go to your_theme/assets/custom.css

 

and insert there this code:

 

@media (max-width:767px){.container{width:auto; } }

 

 

Reset your cache and check the result. You should see your eshop on phones much wider and there should be also enough space for 2 products in a row.

 

Hello Andrej,

I followed your tip but this modify doesn't help too much. On all the mobile phone I still see only one column, also on big screen device like iPhone x, iPhone 8 plus and others.

I start seeing 2 column on tablet like iPad mini, but on this device at least 3 column should be showed.

[swiss]

Thanks, is work/help for me !

[Ray UK]

I put this css in my custom.css

 

#products .product-miniature, .featured-products .product-miniature {
    margin: 0 auto;
    max-width: 50%;
}

 

check my site.. www no-match co uk

[Khushik2202]

Could you please describe step by step how can I achieve 2 product columns for mobile? I have tried all the above steps but no luck.

My Prestashop version is 1.7.1.1.

Edited August 22, 2018 by Khushik2202 (see edit history)

[dynamicprestashop]

On 7/19/2018 at 7:50 PM, MerseyRay said:

I put this css in my custom.css

 

#products .product-miniature, .featured-products .product-miniature {
    margin: 0 auto;
    max-width: 50%;
}

 

check my site.. www no-match co uk

Hi MerseyRay this trick works but my product now overlap due to the size of the container is too big i think..how to solve the overlap? would you mind to share

[Juan Luis Ferret]

On 7/19/2018 at 6:50 AM, MerseyRay said:

I put this css in my custom.css

 

#products .product-miniature, .featured-products .product-miniature {
    margin: 0 auto;
    max-width: 50%;
}

 

check my site.. www no-match co uk

Very Nice your website, I did the same but didn´t work

Im using Prestashop 1.7.6.0

and the path Im using is themes/classic/assets/css/custmsn.css

Is not the same path explained before, and I dont know if im using the correct css file

 

 

[ÇağatayA]

I use version 1.7.5 dont work this code.

pls I am waiting for help

Edited April 2, 2020 by ÇağatayA (see edit history)

[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

[Eros eros]

 

Hi, I'm also interested in the solution but in the specified files I can't find the lines mentioned by Mikael Mortensen

[Mikael Mortensen]

Hi Eros,

I'm still on version 1.7.8.8 and the files are in the location I have written in the above post.

What version are you using?

Maybe someone knows the difference...

Best regards,
Mikael

[Eros eros]

1.7.8.11

[Mikael Mortensen]

Hi Eros,

I have just downloaded 1.7.8.11, and the files are in the correct place, as mentioned in my post:

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

and

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

And the lines also look the same...Line 60 & 26

Edited April 5 by Mikael Mortensen (see edit history)

[Eros eros]

uhm...

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

{extends file=$layout}

{block name='content'}
  <section id="main">

    {block name='product_list_header'}
      <h2 id="js-product-list-header" class="h2">{$listing.label}</h2>
    {/block}

    <section id="products">
      {if $listing.products|count}

        <div>
          {block name='product_list_top'}
            {include file='catalog/_partials/products-top.tpl' listing=$listing}
          {/block}
        </div>

        {block name='product_list_active_filters'}
          <div id="" class="hidden-sm-down">
            {$listing.rendered_active_filters nofilter}
          </div>
        {/block}

        <div>
          {block name='product_list'}
            {include file='catalog/_partials/products.tpl' listing=$listing}
          {/block}
        </div>

        <div id="js-product-list-bottom">
          {block name='product_list_bottom'}
            {include file='catalog/_partials/products-bottom.tpl' listing=$listing}
          {/block}
        </div>

      {else}
        <div id="js-product-list-top"></div>

        <div id="js-product-list">
          {include file='errors/not-found.tpl'}
        </div>

        <div id="js-product-list-bottom"></div>
      {/if}
    </section>

  </section>
{/block}

I don't have the other file

[Mikael Mortensen]

Here is the code from the 1.7.8.11 build I have just downloaded from Prestashop:

https://build.prestashop-project.org/news/2024/prestashop-1-7-8-11-maintenance-release/
 

{**
 * Copyright since 2007 PrestaShop SA and Contributors
 * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://devdocs.prestashop.com/ for more information.
 *
 * @author    PrestaShop SA and Contributors <contact@prestashop.com>
 * @copyright Since 2007 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 *}
{extends file=$layout}

{block name='head_microdata_special'}
  {include file='_partials/microdata/product-list-jsonld.tpl' listing=$listing}
{/block}

{block name='content'}
  <section id="main">

    {block name='product_list_header'}
      <h1 id="js-product-list-header" class="h2">{$listing.label}</h1>
    {/block}

    {block name='subcategory_list'}
      {if isset($subcategories) && $subcategories|@count > 0}
        {include file='catalog/_partials/subcategories.tpl' subcategories=$subcategories}
      {/if}
    {/block}
    
    {hook h="displayHeaderCategory"}

    <section id="products">
      {if $listing.products|count}

        {block name='product_list_top'}
          {include file='catalog/_partials/products-top.tpl' listing=$listing}
        {/block}

        {block name='product_list_active_filters'}
          <div class="hidden-sm-down">
            {$listing.rendered_active_filters nofilter}
          </div>
        {/block}

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

        {block name='product_list_bottom'}
          {include file='catalog/_partials/products-bottom.tpl' listing=$listing}
        {/block}

      {else}
        <div id="js-product-list-top"></div>

        <div id="js-product-list">
          {capture assign="errorContent"}
            <h4>{l s='No products available yet' d='Shop.Theme.Catalog'}</h4>
            <p>{l s='Stay tuned! More products will be shown here as they are added.' d='Shop.Theme.Catalog'}</p>
          {/capture}

          {include file='errors/not-found.tpl' errorContent=$errorContent}
        </div>

        <div id="js-product-list-bottom"></div>
      {/if}
    </section>

    {hook h="displayFooterCategory"}

  </section>
{/block}

 

[Eros eros]

 

one file is different and the other is not there at all... 

do I update them?

[Mikael Mortensen]

I have no idea - it might break something in your shop. But in my opinion, it seems that you do not have a standard 1.7.8.11 installation...

[Eros eros]

what do you mean by standard installation? PS was updated from 1.7.5.1 to 1.7.8.11 with 1-Click-Upgrade

[Mikael Mortensen]

Okay, I'm not an expert, but can just see that the files I mention are in the 1.7.8.11 version when downloaded from Prestashop.

Did you also choose to update the theme files when you used the one click upgrade?

[Eros eros]

I'm honest, I don't remember.... I'll try to rename the old files and put the new ones, if something goes wrong I have the old copy

[Eros eros]

Replace the my file with that downloaded from PS 1.7.8.11 but category page goes into error HTTP 500, i don't understand

Edited April 5 by Eros eros (see edit history)

[Ray UK]

On 4/5/2024 at 1:04 PM, Eros eros said:

{extends file=$layout}

{block name='content'}
  <section id="main">

    {block name='product_list_header'}
      <h2 id="js-product-list-header" class="h2">{$listing.label}</h2>
    {/block}

    <section id="products">
      {if $listing.products|count}

        <div>
          {block name='product_list_top'}
            {include file='catalog/_partials/products-top.tpl' listing=$listing}
          {/block}
        </div>

        {block name='product_list_active_filters'}
          <div id="" class="hidden-sm-down">
            {$listing.rendered_active_filters nofilter}
          </div>
        {/block}

        <div>
          {block name='product_list'}
            {include file='catalog/_partials/products.tpl' listing=$listing  productClass="col-xs-6 col-xl-4"} 
          {/block}
        </div>

        <div id="js-product-list-bottom">
          {block name='product_list_bottom'}
            {include file='catalog/_partials/products-bottom.tpl' listing=$listing}
          {/block}
        </div>

      {else}
        <div id="js-product-list-top"></div>

        <div id="js-product-list">
          {include file='errors/not-found.tpl'}
        </div>

        <div id="js-product-list-bottom"></div>
      {/if}
    </section>

  </section>
{/block}

Change your file to this

[LeonardMotle]

i want display two column product on mobile responsive, anybody can help?