Design comparison
Solution retrospective
I'm very happy with this project. During this project, I learned how to create separate layouts for different screen sizes. I also feel like my HTML formatting is getting better. I'm still not 100% sure when to use what unit of measurement, but I think I'm improving.
One thing I had difficulty with was creating a purple overlay for the images, but I eventually just popped them into photoshop and added a 50% opacity purple layer on top lol. I honestly feel like it saved me time, so is it really that much of a crime? lol
I'd really like to get better at creating responsive sites, so any critique is hugely encouraged!! 😊
Community feedback
- @elaineleungPosted over 2 years ago
Hi Cole, well done completing this challenge! I'm glad you're happy with the results you got after all that hard work, and most importantly it sounds like you learned a lot in the process 🙂
About your question on the overlay, it all depends on whether you had used an
img
for the image or thebackground-image
in a div. I see that you used a background image, and so the way to add a filter would be to use thebackground-blend-mode
ormix-blend-mode
if you want to blend with the background of a parent container. I also used a background image when I first submitted this challenge (I've since updated it and usedimg
instead), and this was my CSS:.card__image { width: 100%; height: 16em; background-color: hsl(277, 64%, 61%); background-image: url("./images/image-header-mobile.jpg"); background-blend-mode: multiply; background-size: cover; background-repeat: no-repeat; background-position: top; border-radius: 0.5em 0.5em 0 0; }
There are really just three main things I would fix in your solution here:
-
Right now it's pretty huge! The reason is because of the
font-size: 1.5em
that's on the body. What I would do is, change that tofont-size: 1rem;
(which is 16px basically), and things should look a bit more normal. To understand what's going on, I suggest checking out Kevin Powell's explanation on the difference between em and rem units, which you can find on his YT channel. I think he might even have a video on which units to use, so that might address the other point you mentioned. -
The photo is out of proportion right now, and so it looks distorted. While the
background-size
property can take percentages, I suggest using the valuecover
for images, which means to keep the picture in its aspect ratio and make sure that is covers the container, even if parts of it might get cropped. -
I see that you're using some viewport units to center your component. What I'd do instead is to remove those margins and instead use
display: grid
on the body selector for a quick solution:body { display: grid; place-content: center; min-height: 100vh; }
Keep going, you're on way to getting real good at this! 😊
Marked as helpful3@KoruxxPosted over 2 years ago@elaineleung thank you for explaining! The grid technique is really helpful to me because I've been wondering how to properly center my containers for a while. Why doesn't justify-content: middle; and align-items: center; work when trying to center the container in the screen?
1@elaineleungPosted over 2 years ago@Koruxx You're welcome 🙂
So the reason why using
middle
won't work is because it's not actually a valid value for either thejustify-content
oralign-items
property; the only value for centering would becenter
. Also, usingplace-content: center
as I did in my example is like combiningjustify-content: center
andalign-items: center
. This is only available for grid though, not flex box, even though flexbox also has the two properties, just separately instead of one combined property.Marked as helpful1 -
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