@Islandstone89
Posted
Hey, here is some feedback - hope it helps!
HTML:
-
The icons are decorative, meaning the alt text should be empty:
alt=""
. -
There should only be one
<h1>
on a page. Given there are 3 similar headings, I would change all of them into a<h2>
. -
The headings should be written with normal capitalization: "Sedans", "Suvs", and "Luxury". You then use
text-transform: uppercase
to change the capitalization in CSS.
CSS:
-
It's good practice to include a CSS Reset at the top.
-
On the
body
, changeheight
tomin-height
- this way, the content will not get cut off if it grows beneath the viewport. -
When you declare
display: flex
, the default value isflex-direction: row
- hence, you don't need to write that explicitly. -
Remove ALL max-widths and min-widths in px.
-
Add a
max-width
in rem on the card container, to prevent it from getting too wide on larger screens. -
Media queries should be in rem, and it is common to have mobile styles as the default. This means having
flex-direction: column
as the default, and switching toflex-direction: row
when the layout has room to change.
However, you're right in your assumption, as this challenge is more suitable for Grid. To make the columns equal with Flex, you probably need to give each card a flex-basis: 100%
. Since the cards have similar content, they are almost equally wide already. But it would become an issue if you had 3 cards with different content. Whenever you want equal columns, Grid is usually the best choice. Like Flexbox, you set it up on the parent of the cards, the card container:
display: grid;
grid-template-column: 1fr;
Then, at around 50rem
(equals to 800px
), change it to this:
grid-template-columns: 1fr 1fr 1fr;
or, use the shorthand:
grid-template-columns: repeat(3, 1fr);
Marked as helpful
@Ynotlocin1
Posted
@Islandstone89 Thank you for your feedback ! I'll dive into it ! :)