Grid template area issue
Hi, I am using Grid template area, I want the Accessories part to take the area below it, how to do it?
Check the code: https://codepen.io/hamzacodepen951/pen/poqdyXN
15 Replies
your background-image has to be on that grid child not on a child of that child 😉
you can also give that child a height of 100% but then you need to add the missing the box-sizing reset https://codepen.io/MannixMD/pen/MWZOeJE
adding height 100% to .category-img fixed the issue, thanks
Also one more thing, how could I zoom in and show the specific part of image, like for earring category, I want to show earring of model, and for necklace category, I want to show necklace of model, is that possible? if yes, then how to do it?
scale or background-size
and background-position probably
Ok, thanks 😀
Hi again Mannix, I did this tomorrow, by adding height and box sizing border box, and it worked, and now I just realize that the ACCESSORIES text is not centered, how to do it?
text is still centered with the above box
use grid or flexbox or position it's up to you i don't know why you used padding originally
padding for text?
in your pen you have
padding: 7em 0;I used padding for the cards to give height
and that pushed the text to center originally
ok, now I got your point, so what is the good practice then?
add
where you put height: 100%;