@wendyhamel
Posted
Nice first try on this challenge!
Did you see your report? Read the information provided with the learn more
link. You could learn a lot by fixing these issues.
Regarding your questions, you can do this with flexbox or grid. Your choice. Both are fine for this. In your code, you mix things up a bit.
grid-template-columns: 1fr 1fr;
will have no effect without display: grid
.
You added a display: block
here, the default for blocks is that they take up all the space next to them. So stacking comes automaticcally with that.
The display: flex
sets then next to eachother because the default of flex is set to row.
So, you got responsive behavior by using the most basic display options. Which works fine for this challenge!
Something else: Your font is not loading. I think the link is not correct.
A nice finishing touch: you can round the top two corners of the image when it is on top, and the left two corners when it's next to the text-area. ;)
Happy coding!
Marked as helpful
@Eyepop01
Posted
@wendyhamel Thanks a lot... I really appreciate... This is my first challenge... I was expecting lots of errors... I hope to be a better programmer... :)