Hi, this is my first try at html and css so i have some doubts i couldn't figure out by myself (lines refer to css file):
line 42: I specified margins in order to center my card but i think it shouldn't be needed. I tried different align and justify properties but none of them centered the .card div in the viewport
line 112, the most troublesome part: I wanted the image to take 48% of the whole card. I thought to specify width=48% since .bg-image is direct child of .card. But this only let the image take less than 25% (width values). Also setting width to 100% makes the image take less then half of the .card container. I can't understand how the width percentages work. I also used viewport height and width (vh and vw) because i thought that 100vw should have let the image cover the whole viewport but instead only took about half of the card container, so there's obviously something I'm missing. I'd really like an explaination for this behaviour
line 118: i'm not sure this is the smartest way to set the padding. Suggestions? Thanks in advance
@Gaurav-Shekhawat
Posted
For your point 1, enclose the entire card class inside another div, let say "container", then set the display properties of the "container" div as "flex", then set the justify-content and align-items properties to center
Marked as helpful
@Elioskas
Posted
Great job with this one! One thing, though, consider adding a margin top in the media query because part of the picture is cut of from the screen.
@ashiqfury
Posted
You made a excellent work..
flex properties in body to center the .card div element and also you need to specify the height in body.flex-basis and object-fit: cover properties to solve that problem.
when you use flex-basis property in .bg-image, you don't need to specify widthThanks..
@Gaurav-Shekhawat
Posted
@ashiqfury Woah, i didn't knew about that second point. Thanks for your feedback
@mirk-00
Posted
@ashiqfury Thanks but i tried and didn't really work. flex-basis:50% has the same effect of width:50% with object-fit:cover. I can't really tell where is the problem here but i think it's something related to the other element inside .card, that is .text-items
EDIT I solved the issue: i needed to set a width value for the second element too (i.e text-items) i thought that flex could figure it out automatically (since bg-image is 48% the other one must be 52% of the card) but apparently you have to be explicit about that
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
