Four card feature

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Soytto, congrats on finishing the challenge! good job with the grid-areas on desktop switching to flex for the mobile size, I like it!

  The only problem that I see in your project that resizing to screens with less than 450px widths make your content broken, but this is so easy to fix!, instead of using fixed width in your <header> and in your <articles> try using max-width, they will adapt to the screen instead of overlaying out when the screen resizes too much.

  Try changing in your media querie for 800px:

  header {
    max-width: 450px;
    padding: 0 1rem;
    font-size: 1rem;
  }
  

  And for the articles:

  .card {
    box-shadow: 0 5px 25px -15px hsl(212, 86%, 64%);
    border-radius: .4rem;
    position: relative;
    max-width: 375px;
  }
  

  Hope my feedback helped you! try it and tell me if it works!

  Marked as helpful

  0

  ---

  

  Soytto•180

  @SoyttoPosted about 2 years ago

  @DavidMorgade Wow thanks !

  Everything works now ! I had to add too a "margin: auto" because the text was in the left side

  Is there a rule to know when I have to use "max-width" ?

  Thank you again for your help !

  0

  

  David•8,000

  @DavidMorgadePosted about 2 years ago

  @Soytto When your box needs to strech in lower sizes (like this case) use max-width, if the container will have a fixed size all the time user width!

  0

  

  Soytto•180

  @SoyttoPosted about 2 years ago

  @DavidMorgade Okay, thank you so much !! I will try to remember next time for other challenges !

  0
• 

  Ahmed Kamel•1,190

  @hmadamkPosted about 2 years ago

  very good looking but i think that the padding is missing your site on some screen sizes

  0

  ---

  

  Soytto•180

  @SoyttoPosted about 2 years ago

  @hmadamk thank you for your feedback !

  Yes I over use ctr+z and deleting some padding where I shouldn't, i'll fix it, thanks!

  0