# How to resize 'Modern Category + Group Boxes' thumbnail via CSS
**URL:** https://meta.discourse.org/t/how-to-resize-modern-category-group-boxes-thumbnail-via-css/296561
**Category:** Development
**Tags:** css
**Created:** [February 24, 2024, 12:56am UTC](https://meta.discourse.org/t/how-to-resize-modern-category-group-boxes-thumbnail-via-css/296561 "2024-02-24T00:56:21Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@HisFocus](https://meta.discourse.org/u/HisFocus)
#### Post date: [February 24, 2024, 12:56am UTC](https://meta.discourse.org/t/how-to-resize-modern-category-group-boxes-thumbnail-via-css/296561/1 "2024-02-24T00:56:21Z")
I am looking to resize the ‘Modern Category + Group Boxes’ thumbnail via CSS. If I use the default setting to use an image, the image increases the size of the thumbnail, (even if I use a smaller image). I’m sure that this has been done before but my searching has not offered any results that addresses this issue directly (again, that I have been able to find).
Any help would be greatly appreciated, even if you can point me in the right direction with CSS.
Thank you!
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [February 24, 2024, 1:03am UTC](https://meta.discourse.org/t/how-to-resize-modern-category-group-boxes-thumbnail-via-css/296561/2 "2024-02-24T01:03:40Z")
Since you seem interested in doing a lot of customizations to your Discourse instance, perhaps these topics can help you:
> [@Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966):
>
> This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …
> [@Making custom CSS changes on your site](https://meta.discourse.org/t/make-css-changes-on-your-site/168101):
>
> bookmark This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. person_raising_hand Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics C…
> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648):
>
> Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…
> [@Theme Developer Quick Reference Guide](https://meta.discourse.org/t/topic/110448/1):
>
> As themes grow more powerful, there’s more to remember about how they work. We have loads of detailed documentation under [#howto / #themes](https://meta.discourse.org/tags/c/howto/themes), but if you just need something to jog your memory, this guide may help. General Resources [scroll Beginner’s guide](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)[scroll Designer’s guide](https://meta.discourse.org/t/designers-guide-to-discourse-themes/152002/1)[scroll Developer’s guide](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)[paintbrush Theme Creator](http://theme-creator.discourse.org)[desktop_computer Theme CLI](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950)[notebook_with_decorative_cover Theme Directory](https://meta.discourse.org/c/customization/theme/61/none)[jigsaw Component Directory](https://meta.discourse.org/c/customization/theme-component/120)[wrench Theme Modifiers](https://meta.discourse.org/t/theme-modifiers-a-brief-introduction/150605)[wrench Themeable site…](https://meta.discourse.org/t/-/374376)
> [@Learn how to start building stuff for Discourse if you're newbie (like myself)](https://meta.discourse.org/t/learn-how-to-start-building-stuff-for-discourse-if-youre-newbie-like-myself/45954):
>
> There are a few ‘how to start’ guides for working with Discourse already and a wealth of useful info on meta, but I thought it might help to give an insight to the mental processes of starting from little, if any, prior coding experience to building substantial Discourse plugins. Discourse is written by experienced developers and has a large codebase. This can feel intimidating. This intimidation factor can be a significant barrier for novice developers. This is a kind of ‘psychological primer’…
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [February 24, 2024, 1:32am UTC](https://meta.discourse.org/t/how-to-resize-modern-category-group-boxes-thumbnail-via-css/296561/3 "2024-02-24T01:32:17Z")
This topic may help. @Canapin did some pretty cool coding here.
> [@Categories: Smartphone View Component](https://meta.discourse.org/t/categories-smartphone-view-component/258590/14):
>
> We’re aware of that and discussing it +1 I was curious, so I made these tweaks to make something like @derak would like: .category-boxes, .category-boxes-with-topics { gap: 1em; } .mobile-view .category-boxes .category-box, .mobile-view .category-boxes-with-topics .category-box { width: 100%; flex: 0 0 calc(50% - 0.5em); } .category-boxes .description { display: none; } .category-boxes .category-box .category-box-inner .category-details .category-box-heading h3 { …