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

XF 1.3 Text cramped into very narrow columns in responsive design

Discussion in 'Styling and Customization Questions' started by Valvar, Jul 27, 2014.

  1. Valvar

    Valvar Member

    Greetings!

    Could anyone help me fix this issue with how the text is rendering in responsive design?

    [​IMG]

    (forum url: http://lumineboreali.net/)

    Edit: to clarify - it seems like the postbit is 'reserving' space, so that no text can be shown below it...
     
  2. nttruong

    nttruong Member

    .Responsive .messageUserInfo {
    width: auto!important;
    }
    .Responsive .message .messageInfo{
    margin-left: 0!important;
    }

    Add them to EXTRA.CSS :)
     
    Valvar likes this.
  3. Russ

    Russ Well-Known Member

    It's in regards the big and tall avatars, the !important you've added for that template modification is overwriting the responsive css. I would look at removing the css added via that template modification and putting it into the style properties so you don't need the !important tags
     
    Last edited: Jul 27, 2014
  4. Valvar

    Valvar Member

    Thank you very much! That fixed it!
     
  5. Valvar

    Valvar Member

    Apologies, but just a quick question: what are the elements called for the quickreply field? I tried
    HTML:
    .Responsive .conversation_view .quickReply{
    margin-left: 0!important;
    width: auto!important;
    }
    
    .Responsive .quickReply{
    margin-left: 0!important;
    width: auto!important;
    }
    but it still looks like this:

    [​IMG]
     
  6. Valvar

    Valvar Member

    Nevermind, I managed to figure it out myself:

    HTML:
    <xen:if is="@enableResponsive">
      @media (max-width:@maxResponsiveNarrowWidth) {
      .message .messageInfo
      {
         margin-left: 0px !important;
       }  
    }
    </xen:if>
    
     

Share This Page