Jump to content

2 product columns for mobile? PS 1.7.1.2?


somchay

Recommended Posts

  • 4 weeks later...

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 by Andrej Stas (see edit history)
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 month later...
  • 2 weeks later...
  • 5 months later...
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

Link to comment
Share on other sites

  • 4 months later...
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.

Link to comment
Share on other sites

  • 1 month later...
  • 5 weeks later...
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

Link to comment
Share on other sites

  • 9 months later...
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

 

 

Link to comment
Share on other sites

  • 8 months later...
  • 2 years later...

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...