Four card feature section

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi @Kerdael, well done on this challenge, looks great. One thing I noticed is that on tablet size, the left column overlaps your attribution because you're using transform: translate property.

  Also, I'm not sure about the <header> element here. Header normally does represent introductory content, but it's for the page as a whole, not a single component - things like navigation, logo, etc. Here, you have one component, the whole thing could be a section of a bigger project.

  Hope this helps :)

  0

  ---

  

  Cedric Chauvet•95

  @KerdaelPosted over 3 years ago

  Hello @AgataLiberska ! Thanks for taking the time to comment my challenge 😄 I noticed that the column overlapped my attribution but I couldn’t pinpoint why. I will need to check other people’s project and analyse their code. And thanks for your explanation about headers / sections I’ll check MDN’s documentation. There is just so much to learn ! Take care , dziekuje Agata

  0

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @Kerdael glad you replied so I can comment again! I saw the same thing in someone else's solution and decided to some more Google searching and I was wrong there - <header> is allowed within a section, too! It is on MDN, if you look up sectioning content or something like that :) sorry for the confusion!

  And the issue with the transform property is that it takes an element from its original place, but the rest of the content acts as if it's still in that original place, so the container doesn't stretch to accommodate that.

  Hope this helps :)

  0

  

  Cedric Chauvet•95

  @KerdaelPosted over 3 years ago

  @AgataLiberska thanks for your feedback on the <header> !

  I will keep studying css to solve the issue with the proper setting of my divs.

  Take care , cheers ;)

  0