@RalphPastel972
Posted
Hi Kamran,
Congratulations! It looks really good.
I am a bit embarrassed because I do not know Sass and Scss and therefore I cannot comment on your CSS code ;-(
That being said, there are 2 design difficulties that you skipped and I think you will learn a lot by trying to face them:
- The "image-hero" images are always cut on the left or right side of the banner. And that is the case for all screen sizes (desktop, tablet and mobile).
- The 4 images are either in square form (for mobile size) or in line (for tablet and mobile sizes) and of course the square or the line auto resizes responsively. The flex solution you used is not the best because in some screen size you will have 3 images on the 1st row and the last one on a 2nd row.
Fixing the 2 points above will be challenges that might teach you a lot.
Good luck!
@kaamiik
Posted
Thanks Ralph. Yes I realized that flex is not a good solution for this challenge. Actually for the time I submitted this challenge I was not very good at Grid. Definitely I will change this to grid in future. @RalphPastel972
@RalphPastel972
Posted
@kaamiik Actually, I think you can do it with both. I did this challenge with a mix of both. The first point above, I fixed with flex. The second one with grid.
You van have a look to my not-perfect solution:
Good luck and have a great day.
