Design comparison
Solution retrospective
Hi everyone,
Here's my submission for my second project from FEM. I'm quite happy with how this design turned out. I struggled quite a bit trying to figure out how to create the image overlay effect ended up using the background-blend-mode property, but I'm curious to see your solutions and see if anyone used a different method.
As always, any feedback is greatly appreciated, particularly with my HTML, I would like to know what your thought's are with the way I used BEM notation and also with my choice of elements for the overall structure (but also feedback in general).
Until next time ;)
Community feedback
- @pikapikamartPosted about 3 years ago
Hey, great work on this one. Though I had to zoom out since you are using 1440px as the desktop breakpoint which is too big for lots of users including who uses 1366x768 monitor. The 1440px on the design is not related to the breakpoint, toning that would be really nice.
Some other suggestions would be:
- Don't use
height: 100%
on thebody
as this is relative to the viewport. Usemin-height: 100vh
instead. - Do not
position: absolute
a large content like the.preview-card
since this makes an element out of the flow. If you inspect the layout in dev tools, remove theheight: 100%
on thebody
and hover on it, you will see that it has no height since the element inside it is out of the flow. - Since you are just using
position
to center the layout, do it this way instead. On the.preview-card
remove these stylings:
left position top transform
Then on the
main
tag add these props:align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; # makes sure to have enough height
- You could have used
ul
for the.preview-card__stats
selector since those are list of items that are inside it. - When wrapping up a text-content, make sure that it is inside a meaningful element like
p
tag or heading tag and not using likediv, span
to wrap the text.
Aside from those, great job on this one. Also the bem usage is fine, though I would just use a single block on this called
preview
^^Marked as helpful1@thealexgonzoPosted about 3 years ago@pikamart thank you for your feedback! Yes I was struggling quite a bit centering the card vertically 😂 and it will definitely test those changes on my CSS. So in terms of the layout with different breakpoints, would you suggest I should just make it responsive on all the different sizes between the two specified screen sizes from the design?
1@pikapikamartPosted about 3 years ago@thealexgonzo Hey, glad that you find it useful^^
You mean creating different layout for every breakpoint something like that? Definitely not :>>
If you somehow starts a project using a mobile first approach, you can typically address issues like this one.
For example right, maybe from 0-900 pixel is a mobile to tablet layout, because phones can't be wider than that right, then the rest is just desktop layout.
But do not just like create breakpoint for those sizes, create a breakpoint where the layout is not looking great and needs a bit of tweaking from that. Try resizing always your website from dev tools to see what sizes makes the layout "not" looks good.
Marked as helpful1 - Don't use
Please log in to post a comment
Log in with GitHubJoin 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