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

Question

Im browsing my site on mobile phone. An article can be commented:

The problem is, when Im not logged in, a button appears to log in. But it looks alike:

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

so (in my native language) the button has more width than the width of device. How to set 100% width for this button?

EDIT: sorry I forgot:

<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

In this example I am going to use media queries to change the width from a fixed size (300px) to 100% width.

Here is the media query that will change the styles when it detects a change in size and device.

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

Make sure you include

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

in your head tag. This will allow the media queries to detect the device and then know to make the changes.

Here is a fiddle: Demo