XF 1.3 Reply box squashed to one side for responsive on iPhone

[Mouth]

As per attached screenshot, when browsing my site in responsive narrow mode (I'm using an iPhone, same issue in portrait or landscape mode), the reply box at the bottom of threads is squashed to the right hand side and only using approx 50% of available width.

Would appreciate some assistance with what the cause is and how to resolve?

Thanks.

 

[Jeremy]

Without making a test account; you most likely have CSS that doesn't properly hide the avatar section (but hides the avatar) causing the reply box to not be allowed to expand.

 

[Mouth]

Without making a test account; you most likely have CSS that doesn't properly hide the avatar section (but hides the avatar) causing the reply box to not be allowed to expand.

Thanks Jeremy, from using browser developer tools I've been able to locate it down the usage of:

#QuickReply{margin-left:161px}

It appears to me that this is being set by template quick_reply.css but I cannot see where, as its contents is

/*quick reply*/

.quickReply
{  
    @property "message";
    background-color: @primaryLighterStill;
    padding-top: @uix_gutterWidthSmall;
    padding-bottom: @uix_gutterWidthSmall;
    border-style: inset;
    @property "/message";
}

{xen:helper clearfix, '.quickReply'}

.quickReply .replyPrompt em
{
    font-style: italic;
}

/* the quick reply form */

#QuickReply
{
    @property "messageInfo";
    background-color: transparent;
    padding: 0;
    margin-left: 140px;
    border-bottom: 1px none black;
    @property "/messageInfo";
}

#QuickReply textarea
{
    width: 100%;
    *width: 98%;
    height: 100px;
    box-sizing: border-box;
}

#QuickReply .insertQuotes
{
    display: none;
    float: left;
    <xen:comment>/* 31 is the submit unit line height, need to add button border because of weird calculation*/</xen:comment>
    margin-top: {xen:calc 'floor(@button.border-top-width + (31 - @button.height) / 2)'}px;
}

#QuickReply .submitUnit
{
    margin-top: 5px;
    text-align: right;
    line-height: 31px;
    position: relative;
    z-index: 1;
}

    #QuickReply .submitUnit .draftUpdate
    {
        position: absolute;
        left: 0;
        z-index: -1;
        color: @mutedTextColor;
        font-size: 11px;
    }
  
        #QuickReply .submitUnit .draftUpdate span
        {
            display: none;
        }

#QuickReply .AttachmentEditor
{
    padding-top: 10px;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive .quickReply .messageUserInfo
    {
        display: none;
    }

    .Responsive #QuickReply
    {
        margin-left: 0;
    }
}
</xen:if>

 

[Jeremy]

It is most likely being set in EXTRA.css, since you can see the responsive code is there:

.Responsive #QuickReply
{
margin-left: 0;
}

 

[Mouth]

I've been through as much as I could find, and cannot find any reference for that value (161) anywhere.
I then changed to XF default style, and disabled all addons through config.php, and get the same result !! Should I be logging a 1.3RC1 bug?

 

[Jeremy]

I've been using my mobile phone on 1.3 constantly. It is being generated in this CSS call:
http://netrider.net.au/css.php?css=...or,xfa_blogs_nav&style=7&dir=LTR&d=1393967215

So one of those templates are generating it. How were you searching for the CSS?

 

[Mouth]

I've been using my mobile phone on 1.3 constantly. It is being generated in this CSS call:
http://netrider.net.au/css.php?css=...or,xfa_blogs_nav&style=7&dir=LTR&d=1393967215

Bingo, thanks very much for staying with me and guiding me through.
I, one-by-one, removed each of the CSS modules on the above URL and reloaded. Then checked if the problem statement was removed. Found it within XFA Better Blogs, specifically the xfa_blog_indicator.css template.
Changed it to:

@media (max-width:@maxResponsiveMediumWidth)
{
    .message .messageInfo, .message #QuickReply
    {
        margin-left: 161px; /* 140 + 16 icon + 10 margin - 5 right space */
    }
}
@media (max-width:@maxResponsiveNarrowWidth)
{
    .message .messageInfo, .message #QuickReply
    {
        margin-left: 0px;
    }
}