Css , Flexbox , mediaquery

Community feedback

• 

  Herson•220

  @HersonmeiPosted almost 3 years ago

  Hi @abdellahelaajjouri,

  If you still don't know it, I recommend that you study the CSS Grid, it will help a lot in those exercises that need to work with rows and columns at the same time.

  The ideal is also that you don't use too many IDs, you could put a1,a2.. as classes.

  I made some changes to your file if you want to simulate it to see how it would look closer to resolution:

  1 - I delete the div <div class="main-article"> , with that all the items were inside the main.

  2 - I changed all ids a1, a2.. to classes i your HTML file.

  3 - I changed the ids in your css file to class (from # to .).

  .a1{
      border-top: 4px solid var(--Cyan);
  }
  ...
  

  4 - I didn't understand why you put two media queries, so I left only the first one with the code below:

      /* For desktop: */
      header h4 , header h2 {
          font-size: 5vh;
      }
      main {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: auto repeat(2, 1fr);
          justify-items: center;
      }
  
      header{
          grid-column: 1 / 4;
          grid-row: 1;
      }
  
      .to 1{
          grid-column: 1;
          grid-row: 2 / 4;
          align-self: center;
      }
  
      .a2{
          grid-column: 2;
          grid-row: 2;
      }
  
      .a3{
          grid-column: 2;
          grid-row: 3;
      }
  
      .a4{
          grid-column: 3;
          grid-row: 2 / 4;
          align-self: center;
      }
    
  } 
  

  Not that this is the final answer, but it's a little closer to ideal, I'm studying CSS Grid more and it has helped me a lot, I hope it helps you too!

  Good studies and keep sending new projects!

  Marked as helpful

  0

  ---

  

  Abdellah el aajjouri•190

  @abdellahelaajjouriPosted almost 3 years ago

  @Hersonmei thank you so much , you have been so damn helpful

  1