Category Boxes Image Alignment Issue

Product Support

AI-generated summary

User becl reports an image alignment issue in the Air Theme’s category boxes, where uploaded 200x200px (or 1000x1000px) images don’t stretch to the box edges and show remnants of the blue placeholder background. They suspect a theme bug, as the placeholder image fits perfectly. HAWK confirms it’s not a hosted plan limitation. Canapin suggests overriding CSS with margin-top: 0;, but becl reports it didn’t work when added as a theme component. Jordan.vidrine investigates and provides a fix via a GitHub PR for the modern category boxes component, which resolves the background bleed issue. becl confirms the fix but notes images still don’t stretch to box edges like placeholders. After editing the third category, images snap into place as shown, but the issue reappears with rows of fewer than three categories — images remain square instead of filling the box as shown. The problem appears layout-dependent and may require further theme adjustments.

1

Hi, I am using Air Theme, which looks awesome!

I have set my categories as boxes. When I upload an image 200 x 200px it does not fit nicely. I am not sure what css I would need to make it look like the box on the right but with my image. So the colour goes to the edges the same way the one on the right does.

This image displays two rectangular buttons labeled "Introductions" and "Success Stories" on a white background, with the former having a green icon of a hand and the latter being blue with white text. (Captioned by AI)
This image displays two rectangular buttons labeled "Introductions" and "Success Stories" on a white background, with the former having a green icon of a hand and the latter being blue with white text. (Captioned by AI)1314×282 26.4 KB

3

Just an update. This is what it says on the upload screen - Recommended 1:1 aspect ratio with 200px minimum size. If left blank no image will be shown. - I have also made it 1000 x 1000 and there is no change, so I think this might be an issue with the way the theme is working. Apart from it not displaying the image to the edges of the box, it also shows a part of the previous blue background behind my image.

Any thoughts or ideas?

4

Hi there – is this on your hosted trial? If so, you will not be able to edit the CSS on our Starter plan, I’m afraid.

5

Hi Hawk,

Thanks for your reply.

No I am on a fresh self hosted install with Air Theme. I kind of think there is an issue with the theme with aligning the images correctly. All I did was upload my file in the recommended ratio and the displayed result is as you see it above.

It would be nice if the image was displayed all the way to the edges as it does in the placeholder before uploading images. If not at the very least not have the blue remnants of the placeholder visable behind my image.

I’m happy to put CSS code somewhere to fix it, though I am not sure where and what code I need to put in there. Though as I said I think it might be something going on with the theme not displaying the uploaded file correctly.

6

There’s a margin-top: .5em on the parent div, which shifts the parent and the child image down.

You can try overriding this behavior:

 categories-list .category .category-logo.aspect-image {
    margin-top: 0;
}

I think this issue should have an official fix, though.

8

Hi Coin-coin le Canapin,

Thank you for the css code. I am not really sure where to add this. I did search online and I think I need to add it as a component to the air theme. Which I did and when enabled it does not make any change. I am probably doing it wrong.

I agree I think this needs to be looked at on the theme. I might make a post on the theme page and see if it can be fixed.

9

Hi Hawk,
Is there a way I can tag someone from the Air Theme team on this post to try and get a resolution to this issue.

I did try the css that was mentioned by another user in this post but it did not seem to work.

Cheers
Bec

10

Hi Bec, I have assigned a designer to take a look but I can’t give you a timeframe sorry, it’s the weekend.

11

No worries. Thank you very much.

12

Hey there! Thanks for reporting this. I will take a look and get you an answer soon, or add the fix to the theme.

13

I have a fix here → DEV: fix image size by jordanvidrine · Pull Request #49 · discourse/discourse-minimal-category-boxes · GitHub

If you update the modern category boxes theme component installed onto the air theme, it should fix your issue.

Thanks!

15

Hi Jordan,

Thank you very much. Yes that has fixed the issue with still seeing the placeholder in the background.

I wonder if you can tell me how I can make my image go to the edges of the box like the place holder does. It looks much nicer and I was expecting it would look the same when I uploaded my image.

The image displays a horizontal navigation menu with three buttons: two green buttons labeled "General" and "Introductions," followed by a blue button labeled "Success Stories." (Captioned by AI)
The image displays a horizontal navigation menu with three buttons: two green buttons labeled "General" and "Introductions," followed by a blue button labeled "Success Stories." (Captioned by AI)2022×300 46.2 KB

If there is CSS I need to use where would it go as CSS I tried to add before didn’t seem to work and I’m not sure if this is because changes are not allowed on the theme or if I just don’t know what I am doing as I am new to discourse.

Cheers
Bec

16

Hi Jordan,
I just wanted to update you.

A strange thing happened when I edited the 3rd category box suddenly all the images snapped into place by themselves. So all looking ok now.

Screenshot 2025-03-19 130609
Screenshot 2025-03-19 1306092018×466 98 KB

Thanks again for all of your help.

17

Hi again Jordan,

Actually it is going to be an issue if you have categories that have less than 3 in a row. When the 3rd image in a row is added it all snaps nicely into place as in my previous message. But if you have only two in a row then it doesn’t place the image nicely within the box it puts it in as a square. So now I have some images that look nice and some that have a square image.