@elaineleung
Posted
Hi Abdulkadir, welcome to Frontend Mentor, and well done on your first challenge!
I think you did a number of things well here, including using flexbox for the layout, using the picture element and also including the object-fit
in your image. Some other feedback/suggestions I have that might help you out:
-
I notice that you have a
position: fixed
for your footer. Is it because you wanted to make sure it's at the bottom? I think it's fine if the background isn't transparent because at screen sizes where the height is small, the footer can overlap with the card, and then not only is the text hard to read, the text is also covering the card. If your goal is just to have the footer at the bottom and not necessarily fixed to the screen, then you can useflexbox
on the body for positioning, which helps with centering the card and also pushing the footer to the end when you addflex:1
to.container
. You also have flexbox on.container
already, so for vertical alignment, you can just addalign-items: center
. It all looks like this:body { min-height: 100vh; // change height to min-height display: flex; flex-direction: column; } .container { align-items: center; // this is for vertical alignment flex: 1; // this is for occupying all the space and pushing the footer to the bottom // rest of your code } // remove fixed properties from footer
-
There's a scrollbar here when it doesn't need to be, and it's because the browser is using the default margin settings. I recommend adding reset/normalize rules to every project so that the styles can be consistent in different browsers; you can look into Andy Bell's CSS reset, which is what I use. Anyway, for here as a start, try to add this to the top of your sheet as a reset rule:
* { box-sizing: border-box; margin: 0; padding: 0; }
-
To have the image and text at 50%, it won't be enough to have
width: 50%
on the text; since you're using flexbox, you can try addingflex: 1 0 50%
on the image as well.
That's all for now, and once again, great job here, and hope to see more solutions coming!
Marked as helpful
@abguven
Posted
@elaineleung Thank you very much for this helpfull feed-back. Not being able to set width property as i wish in flex elements was one of the problems i was facing a lot.