@Joshtemi0
Posted
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.
@geomydas
Posted
@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 directly
body {
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 viewport
@Joshtemi0
Posted
@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
@geomydas
Posted
@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.
@Joshtemi0
Posted
@geomydas
Okay
What about in other cases ?
@geomydas
Posted
@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
