Responsive product preview with Sass, Flexbox and Grid
Design comparison
Solution retrospective
Most proud of being able to swap the picture when the page goes from desktop to mobile and to make the image align with card content. The picture swap was accomplished in a very easy way that is easy to understand. I was able to create the page very quickly once all the research was done by using sass.
What challenges did you encounter, and how did you overcome them?Every time I fixed something, something else broke! I tried three different ways to swap the picture and settled on the easiest way. I had a lot of challenges with flexbox and lining up items in the content, then switched over to grid and it worked. I was able to get a lot of good ideas from others who had done the challenge.
What specific areas of your project would you like help with?I tried to use the picture element, but the image didn't scale or respond. Is there some trick to getting the image to fill its div?
Community feedback
- @juliusalbertoPosted 4 months ago
The solution includes semantic HTML, which is nice. I am not sure whether it is accessible or not but it's good enough for me :)
The layout doesn't look good on iPhone SE as the card element is bigger than the screen (I assume that you don't use the Figma file, which provides the exact width and height). It's nice though. The margin between elements is a bit... off. (I'm sorry if I am too nitpicky in this) - the margin between elements in mobile and desktop should be different.
Code is well structured. Good job!
PS: I don't know much about grid so can't comment on your picture element solutions.
0
Please log in to post a comment
Log in with GitHub
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