Weird layout after update

support
1

Has anyone found issues when updating to the latest version of Discourse? All my category thumbnails are distorted. I only used customisation on the home page but even on the category pages they are all skewed.
How can I change this?

Screenshot 2022-10-13 at 22.09.39
Screenshot 2022-10-13 at 22.09.391920×1086 108 KB

2 Likes
2

Noone?
Laugh Lol GIF by PG Tips

1 Like
3

Maybe you have fixed it already, but it’s looking fine when I visit it anonymously:

image
image778×720 78.1 KB

2 Likes
4

I think there was an update that added a new feature (dark/light category logos) that may have affected some customisations. I’m not 100% sure on the answer as to how to fix it yet, but I’m asking around. :+1:

(Though hopefully @renato is right and it has magically fixed itself :crossed_fingers:)

3 Likes
5

Here I see the images look like @renato’s screenshot on Chrome, but like the OP’s on Safari. This is certainly a regression, apologies about that. It doesn’t look like you have any customizations, but you do have some very large images as category logos, for example the one in the OP is 2657x2657.

So, two ways to fix:

  1. Upload smaller images. You can try with a 150x150 image, that one should work well. (This also makes the pages load faster, with the smaller images.)
  2. If you don’t want to reupload images, try with this CSS rule in a theme component:
body .category-logo.aspect-image {
  max-width: 150px;
}
3 Likes
6

Yeah it looks OK on Chrome but not Safari. Any ideas why it would do that? I did try the max-width fix and it didn’t work. Also uploaded smaller images 450px square still no joy

7

Can you try with

@supports (--custom: property) {
  body .category-logo.aspect-image {
    max-width: 150px;
  }
}
3 Likes
8

Definitely not alone. I don’t understand the solution, though (being a complete newbie). Is there somewhere I can find a bit more information on what / where I need to implement the solution? Thanks.

13

Hello and welcome @Richard :slightly_smiling_face:

You can add extra snippets of code to your site by creating a small theme component and attaching it to your theme:

  • Go to /admin/customize/themes
  • Click on install and then create new
  • Give it a name, and select ‘component’.
  • Create
  • Add it to your theme
  • Click on the Edit CSS/HTML button and paste the code into the Common tab
  • And save. :+1:
3 Likes
15

I think there have been a couple of fixes added for this issue, so you may be able to remove your custom code after an update. :+1:

2 Likes
16

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.