Enrique
Enrique
PostsComments
KPCKevin Powell - Community
Created by Bowser on 6/7/2024 in #front-end
Wrap grid columns with grid area
@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
  
  header img, header div {
    grid-area: auto;
  }
}
@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
  
  header img, header div {
    grid-area: auto;
  }
}
If you want to have the items on top each other below 480px, you have to change the amount of columns. By setting 'grid-template-columns' to '1fr' it essentially creates a one-column layout. For the items inside the grid-container (header) you have to set the 'grid-area' property to its initial value which is 'auto'. In that way you reset their position in the grid.
7 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 2/2/2023 in #front-end
creating line next to text
@saaika I found this video on YouTube. https://www.youtube.com/watch?v=57JeRBZMbiE I was about to ask on this server but I figured out I could search it on Google first 😄
7 replies