somchay Posted July 13, 2017 Share Posted July 13, 2017 I would like to change my page to display two columns of products on mobile devices How to? Link to comment Share on other sites More sharing options...
angah Posted August 5, 2017 Share Posted August 5, 2017 i want display two column product on mobile responsive, anybody can help? Link to comment Share on other sites More sharing options...
Andrej Stas Posted August 8, 2017 Share Posted August 8, 2017 (edited) 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) Link to comment Share on other sites More sharing options...
sengok Posted August 11, 2017 Share Posted August 11, 2017 hello andre, where i can find link to customs.css coz i follow ur link i dont see the link. thanks before. enda Link to comment Share on other sites More sharing options...
sengok Posted August 12, 2017 Share Posted August 12, 2017 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 More sharing options...
delfost Posted September 13, 2017 Share Posted September 13, 2017 same here plz help Link to comment Share on other sites More sharing options...
lisandronob Posted September 26, 2017 Share Posted September 26, 2017 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 Link to comment Share on other sites More sharing options...
dani algarra Posted March 8, 2018 Share Posted March 8, 2018 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 More sharing options...
DARKF3D3 Posted July 15, 2018 Share Posted July 15, 2018 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 More sharing options...
swiss Posted July 19, 2018 Share Posted July 19, 2018 Thanks, is work/help for me ! Link to comment Share on other sites More sharing options...
MerseyRay Posted July 19, 2018 Share Posted July 19, 2018 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 Link to comment Share on other sites More sharing options...
Khushik2202 Posted August 22, 2018 Share Posted August 22, 2018 (edited) 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) Link to comment Share on other sites More sharing options...
dynamicprestashop Posted September 22, 2018 Share Posted September 22, 2018 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 More sharing options...
Juan Luis Ferret Posted July 16, 2019 Share Posted July 16, 2019 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 More sharing options...
ÇağatayA Posted April 2, 2020 Share Posted April 2, 2020 (edited) 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) Link to comment Share on other sites More sharing options...
Mikael Mortensen Posted February 24, 2023 Share Posted February 24, 2023 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now