Knowledge Base

Knowledge base

Explore How-To's and learn best practices from our knowledge base.

All Reviews Page Customization

Modified on: Sat, 6 Apr, 2019 at 4:19 AM


All Reviews Page Customization

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)



Did you find it helpful? Yes No Still have questions? Talk to us here

Can you please tell us how we can improve this article?

More articles in All Reviews Page