Design comparison
Solution retrospective
I'm proud of getting most of it done , mainly the structure at once. As usual I would like to be more practical in css but I guess it's a matter of time and practice to get there.
What challenges did you encounter, and how did you overcome them?Working with flexbox should make things easier but I'm still finding it difficult figuring out the appropriate sizes and how not to make it so it breaks in different views. The way I overcame them was changing values until I was satisfied with how it looked.
What specific areas of your project would you like help with?update: after checking the submition in the comparison part, the screenshot is not the same thing I see on my browser window. I don't know if the comparison applies a sort of zoom or some type of width that "breaks" the final preview. It's frustrating because I've been making changes and it doesn't look like it does on my browser. The one that is shown here is not the one I did which is much closer to the "solution". If you check the "live site" it looks closer to the solution.
Community feedback
- @RiscloverPosted 3 months ago
Addressing what you said here: "More than help I'd like an explanation as to why whenever I switch to the responsive view the image from the card would have a sort of "margin-top" even though I did not use this attribute"
So I was just checking out the live version of your site. I wasn't sure what you were talking about, because for my view, the image was actually cut off at the top instead of there being extra space. But then that clued me in to what the issue might be.
Go back to responsive view and change the height. You'll see that depending on the height of your browser, the card can either look like the image is going beyond the boundaries of the card, or there's space between the card and the top. This is because you have a % height (60%) instead of a fixed height (such as with px). Change it to be of fixed height to fix the issue, and just make the width dynamic to fit different screen sizes.
Marked as helpful0@angwbPosted 3 months agoHey thanks for the detailed answer. After I posted I noticed a difference in the comparison part between my solution and the appropriate solution, I have now changed problems lol because it doesn't look lika that at all on my browser. I'm sure it's definitely related to the sizes and the percentages I used for the responsive alternatives. @Risclover
0 - @akremsoussiPosted 3 months ago
your work looks great but could use some changes, first the svg img in the design has rounded corners which is not the case in your work. the container is larger in width and shorter in height and the font-size is a bit smaller than it should be and finally you should work more on margin and padding. Hope I helped you, keep the good work.
Marked as helpful0@angwbPosted 3 months agoThanks for pointing out the thing about thing the size, it seemed ok on my browser but it clearly isn't the case. I'll definitely look into it. @akremsoussi
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