On category page products listing shows 3 items on a row, is it possible to switch to 4?

[stalenman]

Prestashop 1.7.8.7

Theme: Wriztyclock Versie 1.0.0

URL to one of the category pages : https://www.bylolah.nl/16-men

 

On the category pages products listing shows 3 items on a row, is it possible to switch to 4?

I do not need the displayLeftColumn which is now active.

This is a team which I bought a long time ago and developer stopped with supporting this team so I hope  one of your experts will help me with solving this.

Best Regards,

Stalenman

[Sashok]

 

 

#category #left-column {display:none;}

#products .product-miniature {width: 25%;}

аnd change in TPL
to:
class="left-column col-xs-12 col-sm-12 col-md-12"

example: https://adaptex.pl

 

Edited April 25 by Sashok
added example (see edit history)

[JBW]

Instead of hiding the left column in CSS rather change the layout of category page to full width in theme settings

[stalenman]

Shashok,

Many thanks for your help (all others also of course).

It works almost 😉

I made the changes:

Disable the left column via the hook displayLeftColumn

Implemented the changes you mentioned in, I assume, the files below

layout-left-column.tpl
Line 30:   <div id="content-wrapper" class="left-column col-xs-12 col-sm-12 col-md-12">

theme.css
#products .product-miniature {
    width: 25%;
    padding: 0 15px;
}

The result is: I have a now a full width product page and looks already a much better 👍, however still 3 products on a row.

For sure I did something wrong 😞

Would you please let me know what I did wrong and if I must made a change, please let me know in which file because this is not daily work for me 😉 

 

[Sashok]

#products .product-miniature {

width: 25% !important;

}

 

[stalenman]

Hi Sahok,

Now it works, many thanks for your help !

[juanrojas]

hace 1 hora, stalenman dijo:

Hi Sahok,

Now it works, many thanks for your help !

And do you also want the responsive one at 4? I think it looks bad

[stalenman]

Hi Juanrojas,

I forgot to check this and you are right, this looks bad on a mobile device 😞 Is it possible to fix this or ?

Edited January 19 by stalenman (see edit history)

[Sashok]

@media (max-width:990px) {

#products .product-miniature {

width: 25% !important;

}

}

🤠

is Google search or chatGPT not working for you?

 

 

 

[stalenman]

Hi Sahok,

Of course I've tried this in Google 😁 for hours 😅but not find the solution which solve this issue and therefore I thought lets give it a try at this forum with the experts.

However I've added your code to the theme.css file but unfortunately 25% does not work, this must be 100%.

Thanks for your help !

 

Edited January 19 by stalenman (see edit history)