XF 1.3 Text cramped into very narrow columns in responsive design

[Valvar]

Greetings!

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

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

 

[nttruong]

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

Add them to EXTRA.CSS

 

[Russ]

Greetings!

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

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

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

 

[Valvar]

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

Add them to EXTRA.CSS

Thank you very much! That fixed it!

 

[Valvar]

Apologies, but just a quick question: what are the elements called for the quickreply field? I tried

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

 

[Valvar]

Nevermind, I managed to figure it out myself:

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