We have a tab in theme settings panel in order to make some modifications without editing css files. Editing files is wrong because you can lose on any theme update. Theme updater removes the older version and uploads the latest.

Preview images per line

Below we will show you some tricks.

1. (3 column Thumbnails)
Note: Bestia displays 5 preview images per row by default.

Bestia Panel -> Style Settings (Customizer) -> Additional CSS/JS tab -> Additional CSS:

@media (min-width: 783px) {
/* 3 Columns */
ul.Thumbnail_List {
grid-template-columns: repeat(3, minmax(33.333%, 1fr));
}
/* Fix Right ADS */
.Thumbnail_List li.xtact {
grid-column: 3 / span 2;
grid-row: 1 / span 1;
padding-top: 6%;
}
}

2. (4 column Thumbnails)

Bestia Panel -> Style Settings (Customizer) -> Additional CSS/JS tab -> Additional CSS:

@media (min-width: 783px) {
/* 4 Columns */
ul.Thumbnail_List {
grid-template-columns: repeat(4, minmax(24%, 1fr));
}
/* Fix Right ADS */
.Thumbnail_List li.xtact {
grid-column: 4 / span 1;
grid-row: 1 / span 1;
padding-top: 0;
}
}

3. (Alternative – 4 column Thumbnails)

Bestia Panel -> Style Settings (Customizer) -> Additional CSS/JS tab -> Additional CSS:

@media (min-width: 783px) {
/* 4 Columns */
ul.Thumbnail_List {
grid-template-columns: repeat(4, minmax(24%, 1fr));
}
/* Fix Right ADS */
.Thumbnail_List li.xtact {
grid-column: 3 / span 2;
grid-row: 1 / span 2;
padding-top: 16.4%;
}
}

4. (Alternative – 4 column Thumbnails)

Bestia Panel -> Style Settings (Customizer) -> Additional CSS/JS tab -> Additional CSS:

@media (min-width: 783px) {
/* 4 Columns */
ul.Thumbnail_List {
grid-template-columns: repeat(4, minmax(24%, 1fr));
}
/* Fix Right ADS */
.Thumbnail_List li.xtact {
grid-column: 3 / span 2;
grid-row: 1 / span 2;
padding-top: 16.4%;
}
}

5. (6 column Thumbnails)

Bestia Panel -> Style Settings (Customizer) -> Additional CSS/JS tab -> Additional CSS:

@media (min-width: 783px) {
/* 6 Columns */
ul.Thumbnail_List {
grid-template-columns: repeat(6, minmax(16%, 1fr));
}
/* Fix Right ADS */
.Thumbnail_List li.xtact {
grid-column: 5 / span 2;
grid-row: 1 / span 2;
padding-top: 12%;
}
}