评论时，Facebook上Facebook登录按钮的宽度

Question

我在手机上浏览我的网站。 可以评论一篇文章：

问题是，当我未登录时，会出现一个按钮来登录。但是看起来很像：

|                     |
|                     |
|Login here to send po|
|                     |
|                     |

因此（以我的母语）按钮的宽度大于设备的宽度。 如何为此按钮设置100％宽度？

编辑：对不起，我忘记了：

<div class="flbCont" style="background-color: red; width: 100%;">
<div class="fb-comments" data-href="fladinflakk" data-numposts="5"  width="100%" data-colorscheme="light"></div>
</div>

Answer 1

在此示例中，我将使用媒体查询将宽度从固定大小（300px）更改为100％宽度。

这是媒体查询，它将在检测到大小和设备更改时更改样式。

@media only screen and (max-width: 680px) {
    .login {
        width: 100%;
    }
}

确保包括

<meta name="viewport" content="width=device-width, initial-scale=1.0;">

在您的head标签中。 这将使媒体查询能够检测到设备，然后知道进行更改。

这是一个小提琴： 演示