# Weird layout after update

**URL:** https://meta.discourse.org/t/weird-layout-after-update/241873
**Category:** Support
**Created:** [October 13, 2022, 9:10pm UTC](https://meta.discourse.org/t/weird-layout-after-update/241873 "2022-10-13T21:10:10Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![cokestroke](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cokestroke/32/242007_2.png) [@cokestroke](https://meta.discourse.org/u/cokestroke)
#### Post date: [October 13, 2022, 9:10pm UTC](https://meta.discourse.org/t/weird-layout-after-update/241873/1 "2022-10-13T21:10:10Z")

</div>

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](https://global.discourse-cdn.com/meta/original/4X/a/f/1/af131c9f43c14dca0f9057f924d1bc03b81a478e.jpeg)

---

<div class="post-metadata">

### Author: ![cokestroke](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cokestroke/32/242007_2.png) [@cokestroke](https://meta.discourse.org/u/cokestroke)
#### Post date: [October 14, 2022, 1:07pm UTC](https://meta.discourse.org/t/weird-layout-after-update/241873/2 "2022-10-14T13:07:40Z")

</div>

Noone?  
 ![Laugh Lol GIF by PG Tips](https://media3.giphy.com/media/xUA7b30EbtkaMHvRgk/giphy.webp?cid=04a688a21impytclj703899rooaujmhhllo18fh04yofymvt&rid=giphy.webp&ct=g)

---

<div class="post-metadata">

### Author: ![renato](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/renato/32/383632_2.png) [@renato](https://meta.discourse.org/u/renato)
#### Post date: [October 14, 2022, 1:42pm UTC](https://meta.discourse.org/t/weird-layout-after-update/241873/3 "2022-10-14T13:42:27Z")

</div>

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

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/b/e/0bee60c92c3f2940fa6d0f8ddb6e679285d2a313.jpeg)

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [October 14, 2022, 1:48pm UTC](https://meta.discourse.org/t/weird-layout-after-update/241873/4 "2022-10-14T13:48:21Z")

</div>

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. 👍

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

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [October 14, 2022, 5:47pm UTC](https://meta.discourse.org/t/weird-layout-after-update/241873/5 "2022-10-14T17:47:48Z")

</div>

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:

```plaintext
body .category-logo.aspect-image {
  max-width: 150px;
}

```

---

<div class="post-metadata">

### Author: ![cokestroke](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cokestroke/32/242007_2.png) [@cokestroke](https://meta.discourse.org/u/cokestroke)
#### Post date: [October 14, 2022, 6:37pm UTC](https://meta.discourse.org/t/weird-layout-after-update/241873/6 "2022-10-14T18:37:20Z")

</div>

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

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [October 14, 2022, 7:17pm UTC](https://meta.discourse.org/t/weird-layout-after-update/241873/7 "2022-10-14T19:17:10Z")

</div>

Can you try with

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

```

---

<div class="post-metadata">

### Author: ![Richard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richard/32/309999_2.png) [@Richard](https://meta.discourse.org/u/Richard)
#### Post date: [October 17, 2022, 8:36am UTC](https://meta.discourse.org/t/weird-layout-after-update/241873/8 "2022-10-17T08:36:05Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [October 19, 2022, 6:17pm UTC](https://meta.discourse.org/t/weird-layout-after-update/241873/13 "2022-10-19T18:17:28Z")

</div>

Hello and welcome @Richard 🙂

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. 👍

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [October 22, 2022, 9:18am UTC](https://meta.discourse.org/t/weird-layout-after-update/241873/15 "2022-10-22T09:18:27Z")

</div>

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. 👍

[https://github.com/discourse/discourse/commit/ab217d8ae0b06ae4a9ce94aa2ff200aa84789189](https://github.com/discourse/discourse/commit/ab217d8ae0b06ae4a9ce94aa2ff200aa84789189)

[https://github.com/discourse/discourse/commit/c937b6dd36ace3c1fb005eba2c6fee83d5b1e073](https://github.com/discourse/discourse/commit/c937b6dd36ace3c1fb005eba2c6fee83d5b1e073)

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [November 21, 2022, 9:18am UTC](https://meta.discourse.org/t/weird-layout-after-update/241873/16 "2022-11-21T09:18:52Z")

</div>

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