Design comparison
Solution retrospective
I am proud of being able to use responsive unit like rem for measurement. Which enhances responsiveness
What challenges did you encounter, and how did you overcome them?I'm always challenged with being able to get the right measurement for the width and pixels.
What specific areas of your project would you like help with?The responsiveness on mobile and desktop devices. I still do not understand the concept of media queries yet.
Community feedback
- @Joshtemi0Posted 3 months ago
Great work
From the little I know
You can set the card in the center by using
.blog-content { position: absolute; top: 50; left: 50; transform translate(-50%, -50%); }
And for midea queries it will that more time to explain it here so hope this is helpful at this point.
0@geomydasPosted 3 months ago@Joshtemi0 the way you center cards is not reccomended as it may interfere with other transforms and messes up the z-index.
instead, do this on the parent container or on the body since
.blog-content
is redundant and you should just apply the styles directlybody { display: flex; align-items: center; justify-content: center; }
you can also add
min-height: 100vh
for this case so it will be center in the entire viewport0@Joshtemi0Posted 3 months ago@geomydas
Thank you
Run after me ?? 😄😄😄 Thanks again for the corrections.
I was thinking of incase of multip thing in a webpage will the
min-height
not affect the next on under it?Don't know to to explain better
0@geomydasPosted 3 months ago@Joshtemi0 yes using
min-height: 100vh
will affect the items under it but since this is just a single card with no other items nor siblings, it is okay to do so.0@geomydasPosted 3 months ago@Joshtemi0 don't set a height? justify-content centers your element horizontally / vertical (if your flex-direction is column / column-revense) and align-items is the opposite. theres also justify-items and align-content but we won't dive deeper in to that. just learn some of the basic css and you will be okay, i can't explain everything inside a single comment. using flex allows you to use those properties
0
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