@elaineleung
Posted
Hi Juan, great job using a pseudo element here! Instead of anchoring it to the whole component, you can try putting the position: relative
on the .card__image-header
instead since that is the element that the overlay is being positioned with. In this way, whenever the image is resized, the overlay can be resized with the image and not the entire card.
By the way, you can actually make the card more optimal and responsive; right now, if I change the breakpoint and allow the card to be resized, the overlay and also text starts shifting and looking out of place. What I would do is, I'd firstly remove the min-height
from the pseudo-element and the img
; instead, I'd change them to display: block
so that they would take block properties instead of inline properties, and I'd give the image an object-fit: cover
so that it won't look distorted when the width changes. I'd then change the breakpoint to something smaller (maybe try 980px) and give some margin/padding around the card so that there's space around it below the breakpoint. Lastly, for centering the whole card, I'd change the align-items
property to align-content
. Everything together would look like this:
// functions as a normalize rule
img, picture {
display: block;
max-width: 100%;
}
...
body {
align-content: center;
}
.card__image-header {
position: relative;
}
.card__image-header > img {
// remove min-height: 240px;
}
.card__image-header::after {
height: 100%;
// remove min-height: 240px;
}
@media screen and (min-width: 980px) {
.card__image-header > img {
height: 100%; // this ensures the image height would match the card height
object-fit: cover;
// remove width: 540px
}
.card__image-header::after {
border-radius: 0 0.625rem 0.625rem 0;
}
}
Hope this helps you out!
Marked as helpful
@juancaorg
Posted
@elaineleung Hi Elaine 👋!
Really appreciate your extensive feedback as always 🙌.
You're totally right about the image distortion when the width changes.
I implemented the 'normalize rule' for the img
and picture
element, i.e. use display: block
so that they would take block properties instead of inline properties and the object-fit: cover
as you suggested. Didn't know about this.
This also fixed the issue that I had on having to use fixed heights so the image and overlay wouldn't distort that much, now it's looking much better.
You're right that anchoring the ::after
pseudo element to the whole component wasn't the best thing to do, I was stuck and scratching my head that anchoring it to the img
wouldn't work. I learned today that ::before
and ::after
do not work on img
elements, haha.
Didn't think about anchoring to the picture
element, or in this case .card__image-header
. That works, thanks!
I didn't use a breakpoint like 980px or smaller for the desktop version because the component is just too large, and it was working funny using smaller breakpoints. Might as well just use the mobile version for small viewports.
And again, thanks for the centering tip. I changed align-items
property to align-content
and it's looking better. I have a question about this, tho.
Do you know a way to move my footer
element to the end of the page with this setup? 🤔
When using the align-content
property, every single element centered vertically just fine, but I can't find a way to move the footer
to the end of the page. Using align-self
doesn't work, only when the parent grid is using align-items
.
I'm scratching my head with this, I pushed it a little bit using margin-top
, but doesn't seem optimal 😅
Thanks in advance and again, thanks for your excellent feedback!
@elaineleung
Posted
@juancaorg You're welcome, Juan! About your question on pushing the footer to the bottom, you can try using grid-template-rows: auto min-content
on the body selector and then just remove or comment out the align-content
line. That's basically setting the height of the rows, where auto
is for the main content and the min-content
is for the footer. I normally use flexbox on the body selector, so I actually haven't tried using grid for pushing the footer to the bottom until now. Anyway, see whether that's what you're trying to achieve, and if not, let me know and we'll try something else!
Marked as helpful
@juancaorg
Posted
@elaineleung Thanks for your reply!
I just tested out your tip and it totally works, awesome!
But after you mentioned using flexbox on the body selector, I decided to go with that for simplicity, and using margin: auto
for centering.
I think that is easier to read and understand, getting basically the same result.
Again, really appreciate your help! 🙌