XF 1.2 How do I keep the "last post by" part when the responsive design kicks in?

[fury]

So, in the full width page, there is plenty of room to show who was the last poster in a thread.



That is perhaps one of the most useful parts of information to show

Which CSS file do I edit, and how, so that I keep that particular bit of information when it scrunches down to the responsive/mobile view? It could scrunch down to the same font size as the rest of the text or something like that.

Currently looks like this...



I tried a

.Responsive .discussionListItem .listBlock.lastPost dt
{
font-size: 11px; display: inline;

in discussion_list.css, but it didn't make it display inline.

 

[Matthew Hawley]

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

 

[Jeremy]

If you add this to your CSS it should help you out:

.Responsive .discussionListItem .listBlock.lastPost dt {
  float: left;
  display: inline;
}

You will want to surround that in some media queries as described by Brogan's resource linked above. You may also want to do some more editing to get it to look just the way you want.

 

[Paul B]

Try this:

<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveMediumWidth) {
        .Responsive .discussionListItem .listBlock.lastPost dt {
        display: table-cell !important;
        }
    }
</xen:if>

 

[fury]

I think I got the desired look by replacing this rule (inside the @maxResponsiveMediumWidth block)

       .Responsive .discussionListItem .listBlock.lastPost dt
       {
           display: none;
       }

with this:

        .Responsive .discussionListItem .listBlock.lastPost dd,
        .Responsive .discussionListItem .listBlock.lastPost dt,
        .Responsive .discussionListItem .lastPostInfo .username
        {
            font-size: 11px; display: inline;
        }

End result can be seen here: http://racing-forums.com/forums/nascar-chat.8/

As a table-cell, it got squished up against the timestamp (no padding), and as a float, it sort of ended up half an em above the timestamp.

Thanks all

 

[Jeremy]

Looks good.