# Category Boxes layout doesn't match List Layout **URL:** \ **Category:** UX\ **Created:** [December 26, 2019, 9:34pm UTC](https://meta.discourse.org/t/category-boxes-layout-doesnt-match-list-layout/137126 "2019-12-26T21:34:10Z")\ **Posts on this page:** 1\ **Showing post:** 4
**Author:** ![rogerco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rogerco/32/161338_2.png) [@rogerco](https://meta.discourse.org/u/rogerco)\ **Post date:** [December 30, 2019, 9:36am UTC](https://meta.discourse.org/t/category-boxes-layout-doesnt-match-list-layout/137126/4 "2019-12-30T09:36:07Z")
Here you go with some screen shots: 1. Default Categories with Featured Topics ![image](https://global.discourse-cdn.com/meta/original/3X/6/a/6ad8a05bb2bfce53667fed6e2252c95930984a0a.png) By the way the logos here are really a bit big, forcing lots of wasted space - I prefer to reduce them to 75px height 2. Default Boxes with Subcategories ![image](https://global.discourse-cdn.com/meta/original/3X/9/3/9378ca8e596ffaaec6aa1e0277161f5b43a30164.png) Note a couple of my subcategories there have logo images set and they are shown. The layout is quite space wasteful - the Category Logo is restricted to 40px, but is centred above the title. The subcategory logos are not respecting their aspect ratio (the --aspect-image calculations are not working and are anyway unnecessary, if you just set a height the the aspect will be respected if there is space.). The subcat logos are also a bit large forcing space between the lines. 3. My modification step one ![image](https://global.discourse-cdn.com/meta/original/3X/0/b/0be34762ffa17d57e5033df302375fcbc30f491a.png) The logo floats left of the title which is centred in the remaining space. The subcategories are one per line with colour stripe and lock icon, but the subcategory logos are not show (which is consistent with the default). In a box I don’t think it makes sense to try and cram two short subcat titles onto one line if there is space, looks better with separate line for each I think, but others might prefer to squeeze them up if there are a lot of subcats. 4. My final modifications: ![image](https://global.discourse-cdn.com/meta/original/3X/9/a/9ad81ae412bcf025a45cd74801c096aae5407ed2.png) The subcat logos are shown at 18px ht with the correct aspect ratio at the end of the title. This is optional and they could be positioned between the lock icon and the text, but I prefer to have the stripes and titles lining up. It would also make sense to have the option to use subcat logos in the other default layouts, but I’ve not bothered with those. Here I am also using the [Category Icons](https://github.com/pmusaraj/discourse-category-icons) component (an icon is only set on the Niki Test subcategory) so the position of the stripe is slightly shifted to make the icon line up with it, and the icon colour is the stripe colour so it effectively is used in place of the stripe - but those are mods to that component, not the core. 5. Finally here is how it renders as subcategory boxes shown above the parent category topics if that is set. ![image](https://global.discourse-cdn.com/meta/original/3X/6/1/6199fddf55d8fb244c61cbd27615513955fa7251.png) Obviously at the moment there are no grandchild categories to show, but that will need accommodating. Also it might be better to float the logo vertically when there is a really long title - better perhaps to just keep category titles short! So a mixture of HTML text/x-handlebars in /head for the theme effectively replacing “components/categories-boxes” and SCSS. I’m happy to send the code to anyone competent to test it and feed it in to github. This works ok for my site, but there may be other consequences I haven’t spotted. --- _[View the full topic](https://meta.discourse.org/t/category-boxes-layout-doesnt-match-list-layout/137126)._