XF 2.2 Message user info block not in line

[Diablotic]

How do I make message user info block align text not in line but as in here: https://xenforo.com/community/resources/message-user-block-info-and-stats-not-in-line.2001/

 

[Paul B]

Add this to the extra.less template.

.message-userExtras .pairs--justified dd
{
    float: left;
    clear: both;
}

 

[Diablotic]

Thanks, that's great. But to make it perfect would it be possible to exclude mobile devices resposive design?

 

[Paul B]

I'm not entirely sure what you mean.

Those fields are not displayed below small widths anyway.

 

[Diablotic]

Ah sorry, they do on my forum because I used:

@media (max-width: 480px) {
    .message-signature{ display: block; }
}

I would like to achieve something like this:

1/ Laptops etc

2/ Small mobile devices

 

[Paul B]

The .message-signature class has nothing to do with those fields.

I suspect you must have some other code somewhere which displays them.
Something like this should work, but you will likely need to increase the cell sizes or there will be wrapping to a new line.

.message-userExtras .pairs--justified dd
{
    float: left;
    clear: both;
}

@media (max-width: 650px)
{
    .message-userExtras
    {
        display: block !important;

        & .pairs--justified dd
        {
            float: right;
        }
    }
}

 

[Diablotic]

You are right, signatures have nothing to do with this. I have just upgraded from 1.5.x and been working on my forum for xx hours now and am a bit tired.
Code for displaying info on my forum on mobiles is:

.message-userExtras
{
    display: block !important;
}

 

[Diablotic]

Now it works fine on big devices but for mobiles is out of line as you suspected, can you please point me a direction how to fix this?

 

[Paul B]

Use the browser inspector (F12) to determine which other elements you need to add to the declaration with the appropriate changes.

 

[Diablotic]

I am not very good at styling, can you please explain a bit more?

 

[Diablotic]

Which values should I change?

 

[Diablotic]

Please help me achieve the goal. It drives me nuts!