hCaptcha disappears when browser window is too small

[AmmonQ]

The hCaptcha disappears when browser window is too small. This means people using my website on a mobile device will have problems.

[AndrejZbin]

I failed to reproduce this issue. Can you please provide example code?

[AmmonQ]

I noticed this problem with Google's reCAPTCHA as well.

[AmmonQ]

This is my function in my views.py file.

def sidebar_directory_page(request, template='sidebarlandingpage/sidebar_directory_page.html'):
    if request.method == 'POST':
        form = HcaptchaForm(request.POST)

        if form.is_valid():
            return SidebarDirectoryPage.objects.first().serve(request)
        else:
            return render(request, 'sidebarlandingpage/captcha_page.html', {'captcha_form': form})

    else:
        form = HcaptchaForm(request.POST)
        return render(request, 'sidebarlandingpage/captcha_page.html', {'captcha_form': form})

[AmmonQ]

And this is my template file captcha_page.html:

{% extends "base.html" %}
{% load static wagtailcore_tags wagtailimages_tags wagtailembeds_tags %}

{% block main %}

    {% image page.get_parent.specific.hero_image fill-900x400 as img %}

    <div class="row">
        <div class="col-sm-2"></div>

        <div class="col-sm-6" style="margin-top: 1em;">
            <p>If the CAPTCHA does not appear, make your browser window wider. If you are on a mobile device,
                try rotating your screen.</p>
            <p>{{ captcha_response }}</p>

            <form action="" method="POST">
                {% csrf_token %}
                {{ captcha_form }}
                <input class="btn btn-primary" type="submit" value="Click here after completing the CAPTCHA">
            </form>
        </div>

        <div class="col-sm-2"></div>
    </div>

{% endblock main %}

[AmmonQ]

And my form in forms.py as well:

from django.forms import forms
from hcaptcha.fields import hCaptchaField


class HcaptchaForm(forms.Form):
    hcapthca = hCaptchaField(required=True)