The User Avatars are not in line with the post content on discussion

zeldras

The issue

In a Flarum discussion, like this one. user avatar in the left of the content, which is pleasing to the eye

In my forum, users' avatar stay on top of the content. Thanks in advance for helping me change that to a normal layout

Flarum information

Flarum
1.8.1PHP
8.2.4MySQL
10.11.2-MariaDB-1:10.11.2+maria~ubu2204-log

luceos

zeldras have you tried clearing cache?

zeldras

luceos Thanks for the prompt reply. With your suggestions, I have tried to clear the cache.

Just a little but out of luck this time, I still need help when the discussion layout remained as the previous screenshot 🙁

luceos

zeldras please post the output of php flarum info.

zeldras

luceos I used freeflarum for the site, unfortunately haven't able to find the output

dragsugur I have a small snipet to format the sponsor footer, as the only thing I recalled

https://bongcau.com

/* //Sponsor footer
.sponsors {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}

.sponsors a {
margin: 0 10px;
}

.sponsors img {
height: 50px;
margin-right: 10px;
}

.sponsors span {
font-weight: bold;
}

//Cut Large Link
.Post-body a {
    border-bottom: 1px solid var(--control-bg);
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
    vertical-align: bottom;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
} */

dragsugur

have you changed any css?

luceos

zeldras make a backup of this Css and remove the last block relating to post body. See if that fixes it.

dragsugur

this happens because of your custom header code. you styled the header tag as below and because of it every header html tag is effected by it. you should add a class name to the header tag and then style it with that name.

<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}

		header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80px;
			background-color: #f2f2f2;
		}

		.button {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #4CAF50;
			color: white;
			padding: 8px;
			margin: 8px;
			border: none;
			cursor: pointer;
			border-radius: 5px;
			text-decoration: none;
			font-size: 14px;
			transition: all 0.3s ease;
		}

		.button:hover {
			background-color: #3e8e41;
		}

		.icon {
			margin-right: 8px;
			font-size: 20px;
		}
	</style>

zeldras

dragsugur Thank you so much for your advice! It really helped me solve my problem. I'm incredibly grateful for your assistance. You're a lifesaver!