More Columns on the All Review Page (Leex theme)

Once activated, the All Review Page can take one of 3 styles: Default, Leex or Aligh. You can choose which one here .

The All Review Page display usually provides a 3 column display that responds to the size of the screen is showing your page; If the device is small, it will show the product on multiple rows, if the media can support 2 readable items; will show two columns per row and such... but the limit is 3 columns and the reason is that 3 fits on mobile and desktop safely, but sometimes just three items per row can display huge item ( the items will do their best to fill the spaces, growing huge in some cases) and you will end up with something like this:

Maybe would be a good idea to show more columns, and that's what you will learn to do in this article.

What do I need?

  • Access to the main CSS theme file.
  • CODING LEVEL: low to medium CSS knowledge.

What do I do?

1) Access the main CSS file of your theme ( You don't know what file is that? Click here )

2) Go to the very bottom of the file and add ( for 5 Columns)

@media only screen and (min-width: 800px) { .jdgm-rev.jdgm-rev {  width: calc(20% - 15px) !important; } }

===

NOTE:

  • For 4 Columns: use 25%,
  • For 5 Columns: use 20%,
  • For 6 Columns: use 16%,
  • For 7 Columns: use 15%,

... And so... dividing 100 / (Columns you need) to get the percentage.

The pixel`s numbers beside can go from 10 - 20px; and help to space, but you can leave it on 15 most of the times.

REALLY REALLY IMPORTANT NOTE:

Can you see the number beside "min-width"? ( in this case 800px ) What line wants to say is "If a screen is at LEAST 800"; then we will show more columns. Is a really important rule since, how we said at the start of this article: small devices don't need this rule and if we don't include that rule; it will divide the content into 5 columns even if the screen is small; making your review unreadable and an ugly display, you could end up with something like this on a cellphone:

3) Save the changes.

EXPECTED RESULT:

On slim and tall devices ( phone-like)

On square-like devices ( desktop with more than 800px resolution)