We have moved to a new and improved knowledge base. This article is no longer updated. Please click here to find the new version

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

The All Review Page usually displays 3 columns that are responsive to the size of your screen. If your device is small, the page will show one product in multiple rows. If your device is bigger, the page will show two (or more) columns per row.

The limit of columns that we are offering is 3, which looks good on both mobile and desktop screens. However, this sometimes can lead to huge images because the images are designed to fit all the spaces, like this:


In this case, it might be a good idea to display more items per line (or more columns per row), and you can learn about this in the article below.

What do I need?

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

How can I do it?

Step 1:

Access the main CSS file of your theme (Don't know how to find that file? Check this article)

Step 2:

Go to the very bottom of the file and add this code (which works 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%,

In general, divide 100% by the number of columns that you need to get the right percentage.

The pixel's numbers beside can go from 10 - 20px and help spacing out a little bit, but you can leave it on 15 most of the time.

Step 3:

Save the changes.

(!!!) IMPORTANT NOTE:

The abovementioned CSS code works well on big screens (indicated by "min-width: 800px", which basically means any screen that is bigger than a tablet). Without the control of the screen width, the code will work on any screen size, including small mobile screens that can potentially make your site look ugly and unreadable to your viewer. It can look like something like this:

EXPECTED RESULT:

On slim and tall devices (phone-like)

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