I have an input html element which is wider than the div container (class = "text-box-name"). As explained on other FAQ such as : HTML input element wider than Containing Div, I have applied :
* {
box-sizing: border-box;
}
I have also tried to apply this directly to the input type, but it does not work.
Does anyone have an idea to fix this overlapping issue ?
checkout.html
The issue is about the "customer-info" content (second main div)
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="checkout-page">
<form id="form">
{% csrf_token %}
<div class="order-summary">
<div> <a class="back-to-button button" href="{% url 'cart' %}">← Back to Cart</a> </div>
<div> <h3> Order Summary </h3> </div>
<div class = "order-summary-list">
{% for item in items %}
<div class="order-list">
<div class="order-table"> <img class="thumbnail-small" src="{{item.product.imageURL}}"> </div>
<div class="order-table"> <h5> // {{item.product.name}} // </h5></div>
<div class="order-table"> <h5> // {{item.product.price|floatformat:2}} € // </h5> </div>
<div class="order-table"> <h5> // {{item.quantity}} // </h5> </div>
</div>
{% endfor %}
</div>
<div> <h4> Items : {{order.get_cart_items}} <h4> </div>
<div> <h4> Total : {{order.get_cart_total|floatformat:2}} € <h4> </div>
</div>
<div class="customer-info">
<div id="customer-basic-info" class="customer-basic-info">
<div class="text-box-name"> <input required class="form text-box" type="text" name="name" placeholder="Name.."> </div>
<div class="text-box-email"> <input required class="form text-box" type="email" name="email" placeholder="Email.."> </div>
</div>
<div> <h4> Shipping information </h4> </div>
<div class="customer-shipping-info-1">
<div class="text-box-address"> <input required class="form text-box" type="text" name="address" placeholder="Address.."> </div>
<div class="text-box-postcode"> <input required class="form text-box" type="text" name="postcode" placeholder="Code postal"> </div>
</div>
<div class="customer-shipping-info-2">
<div class="text-box-city"> <input required class="form text-box" type="text" name="city" placeholder="Ville.."> </div>
<div class="text-box-country"> <input required class="form text-box" type="text" name="country" placeholder="Pays.."> </div>
</div>
</div>
<div class="payment-options">
<div> <h4> Paiement <h4> </div>
<div> <input class="button" type="submit" value="PayPal" > </div>
<div> <button class="button" id="make-payment"> MAKE PAYMENT </button> </div>
</div>
</form>
</div>
{% endblock content %}
main.css
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Fira Sans', sans-serif;
margin:0;
padding: 0;
}
ul {
margin:0;
padding: 0;
}
li {
list-style-type: none;
}
h1 {
font-family: 'Akaya Telivigala', cursive;
text-transform: uppercase;
text-align: center;
padding-top: 30px;
font-size: 2.5em;
}
h2 {
text-align: left;
font-size: 2em;
}
h3 {
text-align: left;
font-size: 1.8em;
}
h4 {
text-align: left;
font-size: 1.5em;
}
h5 {
text-align: left;
font-size: 1.2em;
}
h6 {
text-align: left;
font-size: 1em;
}
a {
text-decoration: none;
color: black;
}
#page-content{
border-style: solid;
border-width: 4px;
border-color: SeaGreen;
padding-top: 175px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 20px;
background-color: #F0FFFF;
}
.thumbnail {
width:100%;
height:auto;
max-height: 100%;
}
.thumbnail-small {
max-height: 50px;
max-width: 100px;
height: auto;
width : auto;
}
.form {
background-color: DarkSalmon;
opacity: 20%;
margin: 1% 1% 1% 1%;
}
.button {
border-style:solid;
border-width: 2px;
border-color: #696969;
padding: 6px 12px;
cursor:pointer;
border-radius: 10px;
}
.text-box {
border-style:solid;
border-width: 2px;
border-color: Gray;
padding: 6px 12px;
border-radius: 10px;
display:table-cell;
width:100%;
}
/*------------------------Navigation bar -----------------------------*/
header nav {
overflow: hidden;
background-color: #FFFAE1;
position:fixed;
width:100%;
opacity:0.6;
border-style:solid;
border-width: 3px;
border-color: red;
}
header li {
float: left;
font-size: 1.2em;
}
header li a {
text-decoration: none;
display: block;
text-align: center;
padding:15px 15px;
}
#logo {
font-family: 'Akaya Telivigala', cursive;
font-size: 1.2em;
font-weight: bold;
float: left;
}
#cart-count {
color: white;
background: red;
vertical-align: top;
padding: 0 5px;
margin-left: -20px;
border-radius: 9px;
}
/*------------------------Products catalog -----------------------------*/
.products-page {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, 400px);
grid-template-rows: repeat(1, auto);
}
.product-box {
border-style: solid;
border-width: 3px;
border-color: green;
padding: 3%;
}
.thumbnail-box {
border-style: solid;
border-width: 2px;
border-color: RoyalBlue;
margin-top: 2%;
}
/*------------------------Cart page -----------------------------*/
.cart-summary{
display: flex;
border-style: solid;
border-width: 2px;
border-color: brown;
justify-content: space-between;
width: 100%;
padding: 2% 2% 2% 2%;
}
.cart-details-title {
display: flex;
border-style: solid;
border-width: 2px;
border-color: orange;
justify-content: space-between;
width: 100%;
padding: 2% 2% 2% 2%;
}
.cart-details-content {
display: flex;
border-style: solid;
border-width: 2px;
border-color: pink;
justify-content: space-between;
width: 100%;
padding: 2% 2% 2% 2%;
}
.quantity-sorting {
display: flex;
border-style: solid;
border-width: 1px;
border-color: purple;
justify-content: center;
}
.fa-sort{
color: orange;
cursor:pointer;
}
.cart-table {
border-style: solid;
border-width: 2px;
border-color: Tomato;
width: 20%;
margin: auto;
text-align: center;
}
.cart-container {
justify-content: space-between;
}
.cart-table-quantity {
border-style: solid;
border-width: 1px;
border-color: SpringGreen;
padding-left: 5%;
padding-right: 5%;
}
/*------------------------Checkout page -----------------------------*/
.checkout-page {
border-style: solid;
border-width: 2px;
border-color: Indigo;
}
.order-summary {
border-style: solid;
border-width: 1px;
border-color: Maroon;
}
.order-list {
display: flex;
}
.order-table {
border-style: solid;
border-width: 2px;
border-color: Tomato;
width: 25%;
margin: auto;
}
.customer-info {
border-style: solid;
border-width: 1px;
border-color: MediumBlue;
}
.customer-basic-info, .customer-shipping-info-1, .customer-shipping-info-2 {
display: flex;
flex-wrap: wrap;
width: 100%;
flex-basis: 100%;
background-color: MistyRose;
}
.customer-info input {
width: 100%;
}
.payment-options {
border-style: solid;
border-width: 1px;
border-color: #FFD700;
}
.text-box-name,
.text-box-email,
.text-box-address,
.text-box-postcode,
.text-box-city,
.text-box-country
{
background-color: PaleGreen;
border-style: solid;
border-width: 1px;
border-color: OrangeRed;
margin:auto;
text-align: center;
}
.text-box-name,
.text-box-email,
.text-box-city,
.text-box-country
{
width:50%;
}
.text-box-address {
width:70%;
}
.text-box-postcode {
width:30%;
}
/*------------------------Footer-----------------------------*/
footer {
margin-top: 160px;
background-color: green;
opacity: 50%;
border-style:solid;
border-width: 3px;
border-color: purple;
flex-basis: 100%;
}
#copyright {
width:30%;
text-align:left;
padding:1% 10%;
}
