0

I already apply the media query to my website, but the problem is that I can't center the container form. If I use left in one of my media query the other does not center it and it cause to not be able to center it. I also include the cols in media query but it can't help it. I also try to configure the .container form but but tablet or don't be in center please help..

@media only screen and (min-width: 320px) and (max-width: 480px) {
.container form{
    left: inherit;
    position: relative;
}
.form {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------For Tablet------------------------>>>>>  */

@media only screen and (max-width: 780px) {
    .container {
        left: -150px;
        position: relative;
    }
    .form {
        grid-template-columns: 1fr;
    }
}
wangdev87
  • 8,611
  • 3
  • 8
  • 31
Cj_Cipher
  • 9
  • 2

1 Answers1

0

you can do like this

@media only screen and (min-width: 320px) and (max-width: 480px) {
.container form{
    display:flex;
    justify-content:center;
    align-items:center;
    position: relative;
    
}
.form {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------For Tablet------------------------>>>>>  */

@media only screen and (max-width: 780px) {
    .container {
        left: -150px;
        position: relative;
    }
    .form {
        grid-template-columns: 1fr;
    }
}