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

Discussion in 'Styling and Customization Questions' started by fury, Aug 25, 2013.

  1. fury

    fury Member

    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.
     
  2. Matthew Hawley

    Matthew Hawley Well-Known Member

  3. Jeremy

    Jeremy XenForo Moderator Staff Member

    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.
     
    fury likes this.
  4. Brogan

    Brogan XenForo Moderator Staff Member

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

    fury Member

    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 :)
     
  6. Jeremy

    Jeremy XenForo Moderator Staff Member

    Looks good. (y)
     
    fury likes this.

Share This Page