@VCarames
Posted
Hey @casserole27, Great job on this challenge!
You can do the following to reduce the amount code needed and make your content fully responsive.
-
Change the
width
andheight
of each card tomax-width
andmin-height
. This make each card responsive. Remove all the otherwidths
for the card components, you only the ones mentioned above. -
You can remove the grid styling in each card, since by default, text is already aligned to the left and in a column. All you will need to do is use position absolute to position the icons (give all the icons the same class)
-
Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout; it will give you full control of the layout.
Some other suggestion:
-
The headline-wrapper should be a Header Element. Since this the introductory part.
-
The Main Element should only wrap the card components since this the area you want you users to focus on.
If anything is confusing or giving you a hard time, let me know.
Happy Coding! 👻🎃
Marked as helpful