1. Home
  2. Docs
  3. Bestia
  4. Additional CSS Tips

Additional CSS Tips


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%;
}
}

Was this article helpful to you? Yes No

How can we help?