Strange alignment, overlap of icons/posts

lmclarke

Weird alignment on main page, overlap of user icon and post content in discussions

Hey all. I just installed Flarum and have been toying around with it. Love it so far, but I'm running into some really weird issues that kind of wreck the orderly aesthetic.

Issue one: The alignment of posts on the main page doesn't seem to exist. It's not centered, exactly, but it's not right or left aligned either. It's just kind of a mess. I would like it to be left aligned, but I don't know how to do this. How it looks out of the box, to explain what I mean by "kind of a mess":

In posts themselves, the text is written over the top of the user icon and the user name is centered instead of left aligned. I believe the centered part for username is probably intentional, but the other bit is probably not. What it looks like:

The only custom CSS I've got at the moment:

.Post-body { text-align: left; }

Any help is appreciated. Ideally posts, user icons, usernames, and the discussion list on the main page would all be left aligned. How would I go about that? As far as the overlapping of icons and posts, how do I fix that? Thank you!

Flarum information

+-------------------------------+---------+--------+
| Flarum Extensions             |         |        |
+-------------------------------+---------+--------+
| ID                            | Version | Commit |
+-------------------------------+---------+--------+
| fof-sitemap                   | 1.0.3   |        |
| flarum-likes                  | v1.3.0  |        |
| flarum-tags                   | v1.3.0  |        |
| flarum-suspend                | v1.3.0  |        |
| afrux-forum-widgets-core      | v0.1.7  |        |
| webbinaro-calendar            | 1.0.3   |        |
| nearata-no-self-likes         | v1.2.0  |        |
| miniflar-bbcode-progress-bars | 1.0.1   |        |
| malago-achievements           | 0.5.5   |        |
| fof-webhooks                  | 1.0.6   |        |
| fof-user-directory            | 1.2.3   |        |
| fof-stopforumspam             | 1.2.0   |        |
| fof-recaptcha                 | 1.1.0   |        |
| fof-reactions                 | 1.1.0   |        |
| fof-polls                     | 1.0.5   |        |
| fof-merge-discussions         | 1.3.0   |        |
| flarum-sticky                 | v1.3.0  |        |
| flarum-statistics             | v1.3.0  |        |
| flarum-nicknames              | v1.3.0  |        |
| flarum-mentions               | v1.3.0  |        |
| flarum-markdown               | v1.3.0  |        |
| flarum-lock                   | v1.3.0  |        |
| flarum-lang-english           | v1.3.0  |        |
| flarum-flags                  | v1.3.0  |        |
| flarum-emoji                  | v1.3.0  |        |
| flarum-bbcode                 | v1.3.0  |        |
| datlechin-signup-button       | v0.1.0  |        |
| clarkwinkelmann-circle-groups | 1.0.1   |        |
| afrux-online-users-widget     | v0.1.6  |        |
| acpl-mobile-tab               | 1.1.0   |        |
+-------------------------------+---------+--------+

Edit: images fixed.

lmclarke

Resolved. In case anybody else runs into this, after much experimenting managed to fix with custom CSS in the Appearance part of the admin panel:

.Post-body { text-align: left; }
.UserCard 
{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden; 
}
.DiscussionPage-discussion > .container 
{
    min-height: 520px;
    padding-bottom: 20px;
    text-align: left; 
}
.DiscussionList-discussions {
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: relative;
  text-align: left; 
}
.Post-header>ul 
{
    text-align: left; 
    list-style-type: none;
    padding: 0;
    margin: 0;
}

Ffuser1

@lmclarke what's your forum url? Can I see the calendar extension in action