Thumbnail Sizes

Introduction

Maybe your gallery thumbnails are too small or too big for your liking. Or maybe you’re not satisfied with the number of thumbnails per row.

Follow this tutorial and you’ll have your gallery thumbnails resized in no time.

Setting thumbnail sizes

To set the default thumbnail size, you need to create a custom CSS file then add the following code:

body .k-ui-namespace .koowa_media--gallery .koowa_media__item {
    width: 320px;
}

Just replace 320px with your preferred width.

Mobile responsiveness

If you want the thumbnails to look good on different screen sizes, you can use breakpoints:

body .k-ui-namespace .koowa_media--gallery .koowa_media__item {
    width: 50%!important;
}

@media screen and (min-width:600px) {
    body .k-ui-namespace .koowa_media--gallery .koowa_media__item {
        width: 25%!important;
    }
}

@media screen and (min-width:900px) {
    body .k-ui-namespace .koowa_media--gallery .koowa_media__item {
        width: 20%!important;
    }
}

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.