unable to make one column in css grid
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
2
I have a survey form project from freecodecamp.org and when the viewport width < 768px I want the css grid to have only one column, but for some strange reason this doesn't happen. my code
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
body {
margin: 0;
padding: 0;
margin-bottom: 20px;
font-family: Roboto, sans-serif;
background-color: #21a6ff;
}
header {
text-align: center;
margin-bottom: 50px;
color: white;
}
form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
background-color: #FAFAFA;
paddin