I recently set up a signup page and login page using django's default authentication features and forms. To enhance the design, I implemented crispy forms. However, I encountered an issue with the positioning of labels on the screen.
You can view the misaligned labels for the username, password, and password confirmation fields in the following image:
Here is a snippet from my signup.html file where the form layout is defined:
{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block content %}
<body>
<div class="container">
<div class="col-md-6 mx-auto text-center">
<img src="{% static 'pd/images/logo.png' %}" style="width:300px;">
<h2>Welcome to Panasonic Energy</h2>
</div>
<div class="row">
<div class="col-md-4 mx-auto">
<div class="myform form ">
<form method="post">
{% csrf_token %}
{{ form|crispy }}
<div class="text-center ">
<button type="submit" class="btn btn-block send-button tx-tfm">Create Your Free Account</button>
</div>
{% if form.errors %}
<p class="label label-danger">
Please try again.
</p>
{% endif %}
</form>
</div>
</div>
</div>
</div>
</body>
{% endblock %}
I also suspected that the CSS may be causing the label alignment issue. Despite commenting out certain styles in the signup.css file, the problem persists. Here is a snippet from the stylesheet:
.send-button {
background: #54C7C3;
width: 100%;
font-weight: 600;
color: #fff;
padding: 8px 25px;
}
/* Additional CSS comments removed for brevity */
@media screen and (max-width:480px) {
h1 {
font-size: 26px;
}
h2 {
font-size: 20px;
}
}
If anyone could provide guidance on resolving the label positioning issues, it would be greatly appreciated. Thank you in advance for your assistance!