• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

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

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

Screen shot 2013-08-25 at 5.23.40 PM.png

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...

Screen shot 2013-08-25 at 5.24.02 PM.png

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.
 

Jeremy

Well-known member
#3
If you add this to your CSS it should help you out:
Code:
.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.
 

Brogan

XenForo moderator
Staff member
#4
Try this:
Code:
<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveMediumWidth) {
        .Responsive .discussionListItem .listBlock.lastPost dt {
        display: table-cell !important;
        }
    }
</xen:if>
 
#5
I think I got the desired look by replacing this rule (inside the @maxResponsiveMediumWidth block)

Code:
       .Responsive .discussionListItem .listBlock.lastPost dt
       {
           display: none;
       }
with this:
Code:
        .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 :)