Responsive

Hi @loopforever

By default the social buttons should be able to scale down if the container size is narrower than the width of the social button.
The other thing I see in your screenshot is that, the social buttons looks much wider then we set it by default, so I assume your problem will be caused by a third party CSS that may override the style of the social buttons, too.

If you could send me a link to the page where I can see the problem occur, then I could help you in finding a solution.

If you don’t want to share the URL of your site on this forum, feel free to get in touch with us over our ticket system: https://nextendweb.com/contact-us/nextend-social-login-support/?ref=https://ww.wp.xz.cn/support/topic/responsive-411/

Best regards,
Laszlo.

Hi @loopforever

I checked the page, and the problem is indeed caused by a custom CSS, specifically this:

div.nsl-container .nsl-button-google[data-skin="light"] {
    width: 368px;
}

This CSS will make the Google button always be 368px wide regardless of the screen width.

To fix the problem, you could rather use the max-width CSS property: https://www.w3schools.com/cssref/pr_dim_max-width.asp
like:

div.nsl-container .nsl-button-google[data-skin="light"] {
    max-width: 368px;
}

which would scale down the width of the element if the container is narrower than 368px.

Best regards,
Laszlo.