# How to change logo size on Rocket.Chat login screen \[5.4.1\]

**URL:** <https://forums.rocket.chat/t/how-to-change-logo-size-on-rocket-chat-login-screen-5-4-1/15684>\
**Category:** Community Support\
**Created:** [January 3, 2023, 10:09pm UTC](https://forums.rocket.chat/t/how-to-change-logo-size-on-rocket-chat-login-screen-5-4-1/15684 "2023-01-03T22:09:17Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![rvva](https://avatars.discourse-cdn.com/v4/letter/r/a6a055/32.png) [@rvva](https://forums.rocket.chat/u/rvva)\
**Post date:** [January 3, 2023, 10:09pm UTC](https://forums.rocket.chat/t/how-to-change-logo-size-on-rocket-chat-login-screen-5-4-1/15684/1 "2023-01-03T22:09:17Z")

</div>

### Description

I would like to edit the size of the displayed logo on the login screen and its margin.  
I found the corresponding configuration in css:

```auto
  @media all
.rcx-css-13sr1uc {
  max-height: 2.5rem !important;
  margin-inline: -0.5rem !important;
}

```

which points to:

```auto
<img src="https://chat.demo.mydomain.com/assets/logo.png" alt="Logo" class="rcx-box rcx-box--full rcx-css-13sr1uc">

```

The problem is that after adding:

```auto
  @media all
.rcx-css-13sr1uc {
  max-height: 5.5rem !important;
  margin-inline: -0.0rem !important;
}

```

to custom css nothing changes. I read in a thread on github that “important” entries cannot be overwritten or changed. Is this true?

### Server Setup Information

- Version of Rocket.Chat Server: 5.4.1
- Deployment Method: docker
- MongoDB Version: 4.4

---

<div class="post-metadata">

**Author:** ![dudanogueira](https://sea1.discourse-cdn.com/flex021/user_avatar/forums.rocket.chat/dudanogueira/32/2529_2.png) [@dudanogueira](https://forums.rocket.chat/u/dudanogueira)\
**Post date:** [January 4, 2023, 11:13pm UTC](https://forums.rocket.chat/t/how-to-change-logo-size-on-rocket-chat-login-screen-5-4-1/15684/2 "2023-01-04T23:13:48Z")

</div>

Hi!

Can you try the code below?

the .rcx-css- **something** is usually a random generated class, so you should not reference it directly.

```auto
 img[alt~="Logo"] {
     max-height: none !important;
 }

```

**Edit** : trying to fix the ” != "

Let me know if this helps 🙂

Thanks!

---

<div class="post-metadata">

**Author:** ![rvva](https://avatars.discourse-cdn.com/v4/letter/r/a6a055/32.png) [@rvva](https://forums.rocket.chat/u/rvva)\
**Post date:** [January 9, 2023, 12:51pm UTC](https://forums.rocket.chat/t/how-to-change-logo-size-on-rocket-chat-login-screen-5-4-1/15684/3 "2023-01-09T12:51:51Z")

</div>

Unfortunately, it did not help - nothing has changed. The logo is still small.

---

<div class="post-metadata">

**Author:** ![c7h12](https://avatars.discourse-cdn.com/v4/letter/c/22d042/32.png) [@c7h12](https://forums.rocket.chat/u/c7h12)\
**Post date:** [February 27, 2023, 12:36pm UTC](https://forums.rocket.chat/t/how-to-change-logo-size-on-rocket-chat-login-screen-5-4-1/15684/4 "2023-02-27T12:36:12Z")

</div>

Any further insights? I’ve got this issue too and would realy glad to see, how this works!

---

<div class="post-metadata">

**Author:** ![dudanogueira](https://sea1.discourse-cdn.com/flex021/user_avatar/forums.rocket.chat/dudanogueira/32/2529_2.png) [@dudanogueira](https://forums.rocket.chat/u/dudanogueira)\
**Post date:** [February 27, 2023, 5:03pm UTC](https://forums.rocket.chat/t/how-to-change-logo-size-on-rocket-chat-login-screen-5-4-1/15684/5 "2023-02-27T17:03:18Z")

</div>

That’s strange. This worked for me.

Have you cleared the cache?

Also, try installing the latest 5.X version.

---

<div class="post-metadata">

**Author:** ![c7h12](https://avatars.discourse-cdn.com/v4/letter/c/22d042/32.png) [@c7h12](https://forums.rocket.chat/u/c7h12)\
**Post date:** [February 28, 2023, 6:54am UTC](https://forums.rocket.chat/t/how-to-change-logo-size-on-rocket-chat-login-screen-5-4-1/15684/6 "2023-02-28T06:54:50Z")

</div>

I am on Version 5.4.3 and added your code to custom CSS. Also deleted all Browserdata, but nothing changed, Logo is still to small  
 ![image](https://us1.discourse-cdn.com/flex021/uploads/rocketchat/original/2X/c/caee021a6aeec47942055b858e4465a6f50a2baa.png)

---

<div class="post-metadata">

**Author:** ![dudanogueira](https://sea1.discourse-cdn.com/flex021/user_avatar/forums.rocket.chat/dudanogueira/32/2529_2.png) [@dudanogueira](https://forums.rocket.chat/u/dudanogueira)\
**Post date:** [March 2, 2023, 7:41pm UTC](https://forums.rocket.chat/t/how-to-change-logo-size-on-rocket-chat-login-screen-5-4-1/15684/7 "2023-03-02T19:41:50Z")

</div>

# Testing

before:

 ![image](https://us1.discourse-cdn.com/flex021/uploads/rocketchat/original/2X/f/f1e89b343c315fdb8df81a7e5ffa86fef9d0490f.png)

after:

 ![image](https://us1.discourse-cdn.com/flex021/uploads/rocketchat/original/2X/b/bc0cf4b64ffbde3eb33d68797460064783f49180.png)

While copying and pasting the code, what for the “Logo”. I think that was the problem 🙂

it should be " and not ”

```auto
img[alt~="Logo"] {
max-height: none !important;
}

```