XF 1.5 responsive layout adjustment for avatar/user info?

[TUG]

sofar my biggest complaint has been the mobile viewing of messages on the site. while its certianly an improvement over vbulletin, it seems that the responsive style wastes so much space due to the avatar/username/etc column and the huge blank space below it, and just pushes all the actual text in the message over to the right in a tiny column.

surely there is a way to adjust this? ive seen screenshots of mobile viewing that has the username/user info/avatar on top and the message spaced normally below it, but despite all my efforts i cant seem to get this accomplished.

here is an example of what a decent size post looks like with the "narrow" style displayed on phones etc. more than half of the available space is wasted.

 

[Paul B]

That's an issue with your customised style.
In the narrow layout, the avatar and related text is above the message content.



Look through the changes you have made and revert them one at a time.

 

[Martok]

As you'll see if you view this website, it should look like this on a mobile phone:



You need to go to ACP >Style Properties > Responsive Design and set the various widths accordingly. The defaults should be fine but you may need to adjust them to suit your site.

 

[TUG]

we are on a brand new installation of vbulletin, i have not made any changes that im aware of (other than adding custom user titles and such).

what settings or modifications could have been done that would alter that?

the responsive width settings work properly, i can adjust the screen size and see them kick in at the correct levels, however none of them adjust to the way you posted screenshots on above...when it switches from (wide) to narrow, it always looks like it does in my original screenshot.

 

[TUG]

note i see that we have enabled some other profile information to be displayed under the user title (location, likes, etc)...is that what is causing this?

 

[Steve F]

I would suggest creating a new style which will be like new, check the message layout in it. Something is off as it seems there is a margin on the message content and possibly a float: left; on the user info.

 

[TUG]

ah ha!

I believe this is related to the "large avatar" modification I see that one of hte admins implemented in the extra.css file. is there a command or setting that one can put in the extra.css file so that it only enables those settings on the regular desktop style (ie above 976px)?

 

[Martok]

Check those setting I suggested. Also look in customised components in the ACP to see what has been changed in Style Properties.

Note that (although probably not related) you'll need to sort out your advertising as it breaks out of the forum:

 

[Lukas W.]

@media (min-width: 976px) {
    // Put your CSS code here.
}

 

[Martok]

This resource on responsive design should help:

https://xenforo.com/community/resources/responsive-design.2193/

 

[TUG]

confirmed, removing the large avatar change fixed this in the mobile version...its displaying properly now.

 

[TUG]

whoops, guess that ad type isnt a responsive ad...will change..thanks.