I want to make it responsive but it does not work
It's a login page written in php
.
When I use the editor in the browser to check it it just looks like this :not able to see the start of the 2 inputs and the button properly
.
I want to have the responsive design by showing only the form, meaning the 2 inputs, the login button and the text below them. Not sliding to side or anything. Just the form with the white background and the background behind showing a bit.
My css code is the following:
* { padding: 0; margin: 0; box-sizing: border-box;}body { /* make the body full height*/ height: 80vh; /* set our custom font */ font-family: 'Roboto', sans-serif; /* create a linear gradient*/ /* background-image: linear-gradient(to right, var(--body_gradient_left), var(--body_gradient_right)); background-image:background: linear-gradient(to bottom, #009999 0%, #ccffff 100%); */ background: url("../images/index4.png") no-repeat fixed center; /*background-image : url("images/delta2.jpg"); background-repeat: no-repeat; background-position: center; */ background-size : cover; /*opacity : 0.7; */ display: flex; }This is for the whole body and the code for the form is the following :
#form_wrapper { width: 600px; height: 400px; /* this will help us center it margin: auto;*/ margin-left :auto; margin-right :auto; margin-top: 300px; background-color: var(--form_bg); border-radius: 50px; /* make it a grid container*/ display: grid; /* with two columns of same width*/ grid-template-columns: 1fr 1fr; /* with a small gap in between them*/ grid-gap: 1vw; /* add some padding around */ padding: 2vh 15px; opacity : 0.95;}#form_left { /* center the image */ display: flex; justify-content: center; align-items: center;}#form_left img { position:absolute; width: 400px; height: 180px; z-index:1; border-radius: 25px;}#form_right { display: grid; /* single column layout */ grid-template-columns: 1fr; /* have some gap in between elements*/ grid-gap: 5px; padding: 10% 5%; z-index:2;}Finally the media for the responsiveness is :
@media screen and (max-width:768px) { /* make the layout a single column and add some margin to the wrapper */ #form_wrapper { grid-template-columns: 1fr; margin-left: 10px; margin-right: 10px; } /* on small screen we don't display the image */ #form_left { display: none; }}I have also the code for the inputs but its a simple flex display and a center alignment with their colors.I tried changing the media like this :
@media (max-width: 576px) { #form_wrapper { padding: 43px 50px 57px 117px; }}@media (max-width: 480px) { #form_wrapper { padding: 43px 50px 57px 15px; }}@media (max-width: 360px) { #form_wrapper { padding: 43px 50px 57px 15px; margin-left: 20px; margin-right: 20px; }}Still it's not working. It doesn't change...