Responsive grid/flex layout

HTML-CSS
5

It would be better if you did not have two thread with the same question (other thread).

  1. You need to move all the media queries so they come after the selector they are overwriting the styles for.

Example, you have this:

@media (max-width:560px){
  .flex-container{
   display: block;
  }  
}

.flex-container{
  display: flex;
  flex-direction: column;
  height: 100%;
}

It should be this:

.flex-container{
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (max-width:560px){
  .flex-container{
   display: block;
  }  
}

  1. You have invalid HTML and CSS, press the down arrow to the right of the HTML/CSS code boxes and select the “Analyze” menu item. See if you can fix some of them.

  2. Your grid syntax is incorrect

grid-column-template: auto, auto;

Should be

grid-template-columns: auto auto;

  1. I’d suggest logging into Codepen, go to your settings and under the Editor Options make sure that you have checked “Autocomplete”. Now when you start typing the start of a CSS property it will give you a dropdown list. For example, if you start to type grid it will give a list of all the CSS properties that starts with grid.

  2. Look for other resources on web design, YouTube is full of tutorials (search, landing page, portfolio project). Complete a few tutorials and every time you learn something new try it out yourself. You don’t have to make full pages every time when trying out something just limit it to little projects, like a navbar, an image gallery, a section design with some layout. Or just practice some technique like centering and aligning using some colored boxes.

1 Like