how to adapt this website for smaller devices via media

Question

Hi My website is not being responsive on smaller devices. I tried to use @media in my code but that doesn't work so I don't really knwo what to do next any help.

my css code:

 /* Základní styly pro navbar */
 .navbar {
  background-color: #333;
  overflow: hidden;
}
/* Styly pro odkazy v navbaru */
.navbar a {
  float: left ;
  color: white;
  text-align:left ;
  padding: 10px 126.7px;
  text-decoration: none;
  font-size: 1.25em;
  text-size-adjust: center;
  line-height: 70px;
  transform: rotate(-10);
}
/* Styly pro odkazy při najetí myší */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
.container{
  background:linear-gradient(45deg, blueviolet, lightgreen);
  padding:15px 9%;
  padding-top: 20px; 
}
.container .card-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:15px;
  padding-top: 80px;
}
.grid-item:nth-child(4) {
  grid-row-start: 3;
  padding: 50px;
}
.container .card-container .card{
  border-radius: 5px;
  background: #fff;
  width: 450px;
  height: 600px;
  border-style: solid;
 padding-top: 35px; 
}
.container .card-container .card:nth-child(1){
background: #333;
} 
.container .card-container .card:first-child h1:first-child{ 
  color: white;
}
.container .card-container .card:first-child h3{ 
  color: white;
}
h1:nth-of-type(2){ 
  color: chocolate;
}
h1{  
  display: inline;
  margin: 15px;
  margin-left: 50px;
margin-right: 50px; 
}
.container .card-container .card .text{
padding-top: 45px;
font-size: 1em ;
text-align: left;
margin-left: 50px;
margin-right: 50px;
}
.container .card-container .card:first-child .text{
  padding-top: 45px;
  font-size: 1em ;
  text-align: left;
  margin-left: 50px;
  margin-right: 50px;
  color: white; 
  }
h3{
  margin-left: 50px;
margin-right: 50px; 
  text-align: left; 
}
.container .card-container .card:first-child h2:nth-of-type(1){ 
  color: white;
}
h2{
  display: inline; 
  text-align: center;
  margin-left: 50px;
margin-right: 50px;
}
h2:nth-of-type(2){
  
  color: chocolate;
}
@media (max-width:768px){
  .container{
      padding:20px;
  }
}

I tried to write some media forms but that doesn't work, its not responsive, if anyone know what to do else. I dont know what should I write more so I am just typing some things.

Answer 1

Try writing media queries like this: (It will take effect from 768px screen width and below that)

@media only screen and (max-width: 768px){
    .container{
      padding:20px;
    }
    
    //Try with the rest of your selectors and make the changes within these curly brackets.
}

If you want to make changes from another smaller screen size then you can again write another media query like this:

@media only screen and (max-width: 500px){
    //Write your codes (It will take effect from 500px screen width and below that)
}

If you want to show all the cards in a single column (one in each row) then I think this will do it:

@media only screen and (max-width: 768px){
    .container .card-container{
        grid-template-columns: 1fr;
    }
}

You may need to make some other adjustments.