@elaineleung
Posted
Hi Jonas, well done on completing this first challenge!
I think the reason why there's a white space under your image in the desktop view is, the img
needs a display: block
added, and also right now your two columns are not the same width, even though they should be, and so the contents in the text box are just filling out the available space as they should be, except that space is more than the image's height. The best way to add display: block
is to follow what @DavidMorgade said regarding using a set of reset or normalize style rules. In case there's still a white space after adding display:block
, since you're using flexbox here, try adding a flex: 1 0 50%
to your picture
selector. This declaration tells the container to not shrink (that's what 0 is) but to stretch to the desired width if possible (desired width being 50% of the parent).
Hope you get it sorted, and a warm welcome to you for joining the Frontend Mentor community!
Marked as helpful