@correlucas
Posted
👾Hello Dan, congratulations for your solution!
Your solution seems pretty good at all, there's only some fixes you can pay a little bit of attention.
1.The container before changes to mobile with the media query is not holding all the image, the image is having a different scale in comparison to the container, you can note that at 800px theres a big white gap top and bottom. To manage that you should inspect which fixed width is causing this behavior.
My advice for you is to use display: grid; to set layout design and display: flex; to organize elements. In this challenge you could solve that with display: grid; grid-template-column: 1fr 1fr; and the layout is done, two equal column and two lines of code.
2.The h1 is too big in the mobile version, is better you use the media query to changes the font-size to don't have the heading so big in comparison the paragraph and button.
3.If you're interested in a better way name your classes, you should totally read about BEM Naming convention, that's kinda a 'framework' widely used in teams to have a standard between the css code.
Here's a quick guide about BEM:
https://css-tricks.com/bem-101/
Hope it helps, happy coding! Keep it up DAN.
Marked as helpful
@dtp27
Posted
@correlucas Thanks Lucas, I appreciate the feedback! I was able to use Grid for the overall layout like you suggested, and it went much smoother than the first time with flexbox. I'll also look into the BEM Naming Convention. Thanks!
@correlucas
Posted
@dtp27 I'm happy to hear that Dan, keep it up!
