2 product columns for mobile? (SP HiMarket)

[Megan_SnapByte]

I am in desperate need and help as I need two columns to show with two products next to each other.
At the moment only one column shows. 

URL: www.efficientexpress.co.za
Theme: SP HiMarket 

 

[Knowband Plugins]

Checked your website but seems you have managed to do so

 

 

 

[Megan_SnapByte]

15 minutes ago, Knowband Plugins said:

Checked your website but seems you have managed to do so

 

 

 

Hi there 

Yes, sort of. The "Add to cart" Button is however not center and shows two columns for first page. Thereafter it shows one column again. 

Would you know why? Or be able to assist?

Edited August 13, 2018 by Megan_SnapByte (see edit history)

[Knowband Plugins]

Hi,

You also need to make similar changes i.e. xs-12 to xs-6 in JS file. As JS files are combined so I am not able to let you the exact JS in which you need to make changes but sharing the reference according to the default theme i.e. themes/default-bootstrap/js/global.js (JS function display)

 

[Megan_SnapByte]

There is no global.js file, but found a custom.js file which has similar content in.
Changed, yet no change.

Is there a way I could get you to see the back end? In being able to help me? 
Maybe the CPanel? Where all the files sit?

As this is urgent. 

 

[Knowband Plugins]

I believe changing these two lines should work (One is for grid view & another one is for list view). After the change, delete the browser cache & check again.

 

 

[Megan_SnapByte]

It worked! However the "Add to cart" / "Out of stock" buttons are not center and are more to the left of the product block. 
(See image attached.)

We are so close to being done and achieving this. I appreciate all your help and assistance!

[Knowband Plugins]

Hi,

From CSS perspective button are already in the center. There is some padding on the left (in the theme) & buttons are wider than available space which is causing the issue. Either reduce the width of the button OR remove the padding from the left.

To remove the padding from the left, Make the following changes in the theme css file.

Search for .product-miniature .product-container in the CSS file & remove the line mentioned below.

Padding: 9px 9px

Also search for the .product-miniature .product-info in the CSS file & replace 

padding:20px 10px

to

padding:20px 8px

 

Hope it will help. (Refresh the browser cache & CSS cache from the backend).

 

 

[Megan_SnapByte]

It did indeed. Once again, Thank you! 

If you are able to help me, again. Please see my next problem. 
It shows perfect with list view, now my other problem is with List view. (See images attached.) 

I have found the coding for the list & grid view in the custom.js file (See attached.) is there a way a can just disable the list view all-together or what settings do I adjust to show the list view properly?

 

Thank You  

[Claudio_arg20]

Hi. Would you kindly share your knowledge on how to fix the 2 column issue? Thanks.