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.