Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3-column preview card - TailwindCSS - Vanilla JS

Stephen Yu 150

@StephenYu2018

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


To create the entire component, the upper level part of the component is:

<article class="overflow-hidden rounded-lg flex flex-col lg:flex-row">
  <article class="w-[21.667rem] ...">...</article>
  <article class="w-[21.667rem] ...">...</article>
  <article class="w-[21.667rem] ...">...</article>
</article>

Should I allow the children elements to decide the width for the overall outer component (what I coded), or should I make the outer component decide the width for all the children (assuming that they should have equal widths)?

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord