# Change avatar position

**URL:** https://meta.discourse.org/t/change-avatar-position/293192
**Category:** Development
**Tags:** css
**Created:** [January 28, 2024, 1:52pm UTC](https://meta.discourse.org/t/change-avatar-position/293192 "2024-01-28T13:52:07Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Gonerdot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gonerdot/32/366307_2.png) [@Gonerdot](https://meta.discourse.org/u/Gonerdot)
#### Post date: [January 28, 2024, 1:52pm UTC](https://meta.discourse.org/t/change-avatar-position/293192/1 "2024-01-28T13:52:07Z")

</div>

Please tell me how to display an avatar this way

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/1/c/21cb79adb28474e2de1bb2a35602230e136ece88.jpeg)

Like this

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/2/d/52d0f541e00644af2c88dfe5b272b288c86e1036.jpeg)

Theme: [FKB Pro - Social theme](https://meta.discourse.org/t/fkb-pro-social-theme/234323)

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 28, 2024, 3:47pm UTC](https://meta.discourse.org/t/change-avatar-position/293192/2 "2024-01-28T15:47:32Z")

</div>

If you do that, you will lose the ability to see the avatar sliding up or down. Is that okay?

---

<div class="post-metadata">

### Author: ![Gonerdot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gonerdot/32/366307_2.png) [@Gonerdot](https://meta.discourse.org/u/Gonerdot)
#### Post date: [January 28, 2024, 4:38pm UTC](https://meta.discourse.org/t/change-avatar-position/293192/3 "2024-01-28T16:38:32Z")

</div>

Yes, so be it

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 28, 2024, 6:12pm UTC](https://meta.discourse.org/t/change-avatar-position/293192/4 "2024-01-28T18:12:40Z")

</div>

Can you try this _Desktop_ CSS?

```css
.topic-post {
    $avatar_width: 60px;
    $topic_margin_body: 1em;
    
    .topic-body {
        width: calc(690px + var(--topic-body-width-padding) * 2 + $avatar_width + $topic_margin_body) !important;
    }
    
   .topic-avatar {
        position: absolute !important;
        left: calc(var(--topic-body-width-padding) * 2 + $topic_margin_body);
        margin-bottom: 0 !important;
    }
    
    &.sticky-avatar .topic-avatar {
        top: unset !important;
    }
    
    .names.trigger-user-card {
        margin-left: calc(var(--topic-avatar-width) + var(--topic-avatar-width) / 2);
        height: $avatar_width;
    }
}

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/1/0/910acaf9bd10c2e116bd1d3cfb9920609b1e7088.png)

---

<div class="post-metadata">

### Author: ![Gonerdot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gonerdot/32/366307_2.png) [@Gonerdot](https://meta.discourse.org/u/Gonerdot)
#### Post date: [January 28, 2024, 6:33pm UTC](https://meta.discourse.org/t/change-avatar-position/293192/5 "2024-01-28T18:33:00Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/4X/4/2/0/420b0282ca5333cccf47c2e79756e8e37794822f.jpeg)

Thanks, this helped. Now how can I increase the width of the main block in topics?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 28, 2024, 6:53pm UTC](https://meta.discourse.org/t/change-avatar-position/293192/6 "2024-01-28T18:53:54Z")

</div>

I’ve adjusted the CSS above. I did not see it because my screen was split in half. 👍

---

<div class="post-metadata">

### Author: ![Gonerdot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gonerdot/32/366307_2.png) [@Gonerdot](https://meta.discourse.org/u/Gonerdot)
#### Post date: [January 28, 2024, 6:59pm UTC](https://meta.discourse.org/t/change-avatar-position/293192/7 "2024-01-28T18:59:49Z")

</div>

It didn’t work

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 28, 2024, 7:04pm UTC](https://meta.discourse.org/t/change-avatar-position/293192/8 "2024-01-28T19:04:30Z")

</div>

Try again; I updated again right after.

It works on my side:

![Arc_X4TUccN7P8](https://global.discourse-cdn.com/meta/original/4X/6/b/b/6bbd948bed85c3cd895c41524b4b69b92efed022.gif)

---

<div class="post-metadata">

### Author: ![Gonerdot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gonerdot/32/366307_2.png) [@Gonerdot](https://meta.discourse.org/u/Gonerdot)
#### Post date: [January 28, 2024, 7:09pm UTC](https://meta.discourse.org/t/change-avatar-position/293192/9 "2024-01-28T19:09:42Z")

</div>

Oh yes, it works. Thanks a lot ❤

---

<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: [February 27, 2024, 7:10pm UTC](https://meta.discourse.org/t/change-avatar-position/293192/10 "2024-02-27T19:10:22Z")

</div>

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