XF 2.0 Almost got my perfect horizontal postbit but now I'm stuck, can you help me get it right?

[Cannabis Ape]

As I want a horizontal postbit instead of vertical I used @mysimsek guide to achieve that.

Although It send me in the right path how I want it is slightly different and I achieved a couple mods that I want but as I'm a newbie now I'm stuck.

Currently it looks like this:

And this is the code:

Spoiler

.message-avatar {
    float: left
}
@media (min-width: 650px) {
    .message-userDetails {
        display:inline-block;
        padding: 10px;
        min-width: auto;
        min-height: 96px
    }

}
@media (max-width: 800px) {
   .message:not(.message--forceColumns) .message-userExtras {
    display: none;
    }
}
.message-userExtras {
    display: block;
    float: right;
    margin-top: -10px !important;
    width: 31%;
    margin-right: auto
}

.message-userArrow {
    display: none !important;
}

.message-userArrow:after {
    display: none !important;
}

.message-inner {
    display: block !important
}

.template-thread_view .message-cell.message-cell--user,.template-thread_view .message-cell.message-cell--action {
    padding: 10px;
    width: 100%;
    max-height: 150px;
}

.message.message--quickReply.block-topRadiusContent.block-bottomRadiusContent .message-cell.message-cell--user {
    display: none
}

.message--simple .message-cell.message-cell--user {
    display: none
}

.message-userExtras dl:nth-child(2n+1) {
    float: right !important;
    width: 49%;
    padding-right: 10px
}

.message-userExtras dl:nth-child(2n+2) {
    float: right;
    width: 49%
}

.template-thread_view .pairs.pairs--justified {
    padding: 3px;
    margin: 1px
}

.message-avatar .avatar {
    border-radius: auto;
    border: 3px solid #d8d8d8;
}

.message-cell.message-cell--user {
    border-right: none;
}
.messageUserBlock .extraUserInfo {
    font-size: 11px;
    padding: 4px 6px;
    float: right;
}

Now I need that part to be above each other and the url space to be wider than it currently allows.

Probably easy fixes but I learn as I go so hopefully someone can help out.

Cheers.
Edit: so like this basically. See how the right side is above each other.

 

[Cannabis Ape]

Yeah sure just add this code:

@media screen and (max-width: 768px) {
    .message-userExtras {
        display: block !important;
    }
}

Almost, it also shows on vertical messing the space up.

I think I fixed it. Changed it in min-wdth: 450px

But now the title and badge are not under eachother let me check that.

 

[Brad Padgett]

@Cannabis Ape are you completely sure you don't have any code above in extra.less that would override that? It worked perfect for me and scaled down perfect when I resized the window and everything.

Here's a screenshot:



You'll need to ignore the medals part I never set that up. It should display perfect for you.

 

[Cannabis Ape]

To reply to your last post. yes if I scale it with a desktop browser it looks ok but when I check it on my samsung s7 it messes up the layout in vertical view.

 

[Brad Padgett]

To reply to your last post. yes if I scale it with a desktop browser it looks ok but when I check it on my samsung s7 it messes up the layout in vertical view.

EDIT:

@media screen and (max-width: 768px) {
    .message-inner {
flex-direction: row !important;
    }
    .message-userExtras, .message-userDetails, .message-avatar {
        float: none !important;
        display: block !important;
    }
 
}

 

[Brad Padgett]

@media screen and (max-width: 768px) {
    .message-inner {
flex-direction: row !important;
    }
    .message-userExtras, .message-userDetails, .message-avatar {
        float: none !important;
        display: block !important;
    }
 
}

EDIT: You can try this and it's basically undoing everything for mobile so if it doesn't work I don't exactly know what to say. It's undoing the code I gave you so should work.

@Cannabis Ape

 

[Cannabis Ape]

Unfortunally can't get it right in vertical view. It looks fine horizontal but the screenshot is how it looks on my samsung phone.

 

[Brad Padgett]

@Cannabis Ape it just needs some padding. Add some padding-left to the user-extras under the media query should fix it. I defaulted it back with the media query so something else must be going on there. Padding will fix it easily. It seems to work for the user that doesn't have the large website name in his custom field so just add padding.

 

[Cannabis Ape]

@Cannabis Ape it just needs some padding. Add some padding-left to the user-extras under the media query should fix it. I defaulted it back with the media query so something else must be going on there. Padding will fix it easily. It seems to work for the user that doesn't have the large website name in his custom field so just add padding.

Tried several padding but maybe you understand me wrong.

I don't need it to show in vertical view

Now vertical you don't see the details which is logical as there is no room but based on BHW I know it's possible when you hold your mobile horizontal you can see the details.

I only need it to show horizontally.

For my this works:

@media screen and (min-width: 450px) {
    .message-userExtras {
        display: block !important;
    }
}

Now it doesn't show vertically but it does horizontally as I like it.

Although I'm not sure if it's correct as I came up with that one on my own plus what I dislike is that title and badge are next to each other horizontal and vertical.

 

[Brad Padgett]

How big is your phone screen? Wow if it's over 768 pixels that's insane. One of those landscape phones I suppose?

 

[Cannabis Ape]

How big is your phone screen? Wow if it's over 768 pixels that's insane. One of those landscape phones I suppose?

lol no man, just a normal samsung S7

 

[Russ]

You could just utilize XF's built-in horizontal message (it's for mobile).

Style Properties -> Messages -> Message single column break point, change this value to like 10000px (it'll activate on any screens below 10000px)


Then extra.less:

@media (min-width: 1000px)
{
    .message-inner .message-userExtras
    {
        display: block !important;
    }
}

It'll hide the extra user info at 1000px, you can adjust to your liking of course.

 

[Cannabis Ape]

You could just utilize XF's built-in horizontal message (it's for mobile).

Style Properties -> Messages -> Message single column break point, change this value to like 10000px (it'll activate on any screens below 10000px)
View attachment 176339

Then extra.less:

@media (min-width: 1000px)
{
    .message-inner .message-userExtras
    {
        display: block !important;
    }
}

It'll hide the extra user info at 1000px, you can adjust to your liking of course.

Cheers, I have the same code and set on 480px but without the setting in messages and seems to work is that necessary?

Also, I got an issue which you also have on your screenshot, well, if it can be called an issue, probably just a preference but with the horizontal postbit the title and rank are alligned next to each other, any idea how to get them above each other?

 

[shanew]

Your codes made avatar on the reply box display wrong position.