customization Theme customization: how to change number of videos per row

[Tech Support]

First of all, the number of items per row in a list is not a fixed number but is adaptive to screen size. For example, on bigger screens it may be 3 or 4 per row, on smaller it can be down to 2 and even to 1. There is no easy way to modify this behavior: you should have a fair understanding of CSS, adaptive layouts, media queries and be very accurate to check all possible scenarios.

In this article we will try to highlight the path to changing this.

 

How CSS adaptive layout works in the first way

Each list is displayed as a grid inside some container. Container has a width and this width depends on device screen size. Then each container list item is given a % of container size. For example in the given layout each item is given 25% of container size, so that 4 items can fit the space (4 * 25% = 100%):

 

Depending on the amount of container space, the width of each item is given the different % of container width. For example on the page with toolbar each list item is given 33.33% of width so that only 3 items are displayed per row (3 * 33.33% = 100%):

 

Finally on smaller devices there is no sense to display multiple videos in a row, so the list item size is given 100% of the container size:

 

How do you know when it should have 4 per row, when 3, when 2 and 1? Well, this is decided by looking into site on different dimensions using browser DEV tools that allow displaying site under different dimensions. When you see the items are becoming too small, you may decide to reduce the number of items per row.

And how about 5 per rows? Displaying 5 per row will be a problem. Your list has a certain number of total items displayed at once, and by default we use 12 or 24. 12 and 24 are both divisible by 4 and 3 and 2. So when you display 4 per row, you have 3 (or 6) full rows. When you display 3 per row, you have 4 (or 8) full rows. If you decide to display 5 per row, then your list displayable size should be 20, and you can use 5 per row, 4 per row and 2 per row. You can't normally use 3 per row, because 20 is not divisible by 3. Well, you can use 3 anyway, but this would mean that last line will always have 2 items instead of 3.

 

Where it is all set

This is defined as a big set of CSS rules in theme CSS file. In order to see which CSS file your theme is using just look into HTML page source:

view-source:https://www.kvs-demo.com/

 

There you may see multiple CSS file are included on top, and the bigger one will contain the rules:

<link href="https://www.kvs-demo.com/static/styles/all-responsive-white.css?v=9.1" rel="stylesheet" type="text/css"/>

 

Now you need to modify the whole set of layout rules, because there are different rules for different display cases and mobile resolutions. Please note, if your theme has dynamic style switch, it may be using multiple similar CSS files. For example KVS default theme has 2 CSS files:

• all-responsive-white.css

• all-responsive-metal.css

They both have similar rules duplicated. So if both color themes are used in your project, you need to do similar changes in both files.

Now let's look into more details how these rules are defined. In KVS default theme the list item style is defined by this pattern:

.list-<list-type> .item {
  styles for item of <list-type> list
}

 

So the very first style definition of this pattern is this:

.list-playlists .item,
.list-models .item,
.list-sponsors .item,
.list-channels .item,
.list-categories .item,
.list-albums .item,
.list-albums-images .item,
.list-videos .item,
.list-videos-screenshots .item {
  display: inline-block;
  text-align: left;
  background: transparent;
  vertical-align: top;
  cursor: pointer;
  margin: 10px 0 0 10px;
  width: calc(25% - 10px);
  cursor: pointer;
  -webkit-box-shadow: -1px 1px 5px rgba(207, 207, 207, 0.65);
  box-shadow: -1px 1px 5px rgba(207, 207, 207, 0.65);
  border-radius: 0 0 5px 5px;
  background-color: #ffffff;
}

 

The most important part is this line:

width: calc(25% - 10px);

 

This lines says that all items of playlists, categories, models, channels, sponsors, albums and videos have layout 4 per row by default (25% * 4 = 100%). We need 10px offset because this style also uses margin of 10px from left.

Then there are many overrides for this style. For example if a video list is displayed together with sidebar, its number of videos per row is reduced to 3 (33.33% * 3 = 100%):

.sidebar + .main-container .list-videos .item {
  width: calc(33.33% - 10px);
}

 

Then at the bottom of CSS file there are media queries that override certain styles depending on user's device resolution. For example the next style is applied when screen resolution is below 1255px and it reverts back video list layout to 4 per row with a sidebar, mainly because starting from 1255px the sidebar is not displayed aside anymore and is moved to the bottom of page:

@media screen and (max-width: 1255px) {
  ...

  .sidebar + .main-container .list-playlists .item,
  .sidebar + .main-container .list-videos .item {
    width: calc(25% - 10px);
  }

  ...
}

Note this style is applied to both video list and playlist list.

Then at 640px it limits the amount of video items per row to 2 (50% * 2 = 100%):

.list-videos .item {
  width: calc(50% - 10px);
}

And etc.

Here are some key points that worth mentioning:

• In KVS default theme some lists have different settings depending on whether they are displayed together with sidebar or not. Sidebar may be switched on or off on some pages.
• Some styles are applied to different lists (like for videos and playlists above). So you should be aware that changing the width for such styles may also affect other types. If you want to override behavior for videos only, it may be easier to just add new styles for specific item type at the end of file (following the CSS cascade rules), rather then modify existing styles.