Submitted over 3 years ago

3 Card Component - Responsive

@Jorgus1710

A solution to the 3-column preview card component challenge

Solution retrospective

As I do these challenges I tend to trim the fat so to speak with regards to poor practices or bloated and unnecessary code. I disregarded the ALT tags here, but I did pay attention to another users suggestion of making text all uppercase in CSS versus inline in the HTML file. The reason being is that the screen reader will read out each letter if its all caps in HTML.

I play around a lot with flexbox on these challenges, and I continue to better understand and develop more 'instinct' as to why things work and dont work as I progress. This time around I tried to use a chrome app called pixel perfect in order to help achieve as close a look to the source material as possible. We will see how it turned out.

Question(s):

In the individual card divs (.sedans, .suvs, .luxury), I achieved the indentation from the left side of each card by simply using padding/margin-left, and adjusting that for each individual element within the card so that they all line up nicely. Moving forward, I imagine it would be a better approach to wrap all the elements inside the card within a new div, then simply adjusting the left padding/margin of that div which holds all the elements to achieve the same effect, rather than padding each element individually. Is this train of thought correct?

Any other pieces of advice or tips are of course welcome and much appreciated.

Thanks!

Code

Please log in to post a comment

Community feedback

Clara Wen•320
@clarafuwen
Posted over 3 years ago
Hello! I just finished this challenge and was actually using the your proposed structure -- one div to wrap all 3 subcomponents(sedan, suvs, luxury) inside. And it worked very well.

I noticed you have 3 class selectors for sedans, suvs and luxury. And like you proposed, since they share the same style, you could give all 3 of them one shared class (I used 'panel-item') before their current class like this
```
<div class="panel-item sedans_cards">
  </div>
```
Then if you style this shared class 'panel-item' in your CSS, all 3 subcomponents will have the same styles -- basically, style once, and use 3 times plus easier for debugging. Then all the stylings left for sedans, suvs and luxury are their unique background-color or border-radius, which could be done in their individual styling block.

I hope this helps and let me know if you need further explanations!
Marked as helpful

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