First challenge learning HTML and CSS

Community feedback

• 

  Christopher Till•1,070

  @chri55Posted over 4 years ago

  Hey Rodrigo, Very nice solution. You've matched the desktop design very closely. For mobile, I would recommend using flexbox ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ) on the bottom 2 containers, coupled with media queries, so that once the screen is small enough, the containers will stack into a column shape. I also think using a bold font weight on the sign up button would increase contrast and make it easier to see. Well done, and happy coding!

  2

  ---

  

  Rodrigo Gonzalez•30

  @rodrcastroPosted over 4 years ago

  @chri55 Hey! Thank you so much for your feedback :) Although I'm confused with what you mentioned regarding flexbox. I thought I was using it - and have it active on two of the classes at least. Should I add the display: flex property on those as well?

  And I'll definitely take into consideration the weight for the sign-up button and add it! Again, thank you very much :)

  0

  

  Christopher Till•1,070

  @chri55Posted over 4 years ago

  @rodrcastro Yes you're right. apologies, I meant to specify you should change the display of .lower to be flex with direction of column when the screen size gets too small to hold the row type containers, using a media query for max width of around 850px, as below that screen width, the lower container starts to break.

  1

  

  Rodrigo Gonzalez•30

  @rodrcastroPosted over 4 years ago

  @chri55 Hey! Forgot to reply here, thank you for the tip! It worked out just fine, had a hard time working the layout to get it the lower container to a column but got it working eventually.

  The only thing still bugging me here and that I couldn't quite figure out is the text that overlaps when you start getting to smaller screen sizes. The top container works just fine and adjusts perfectly, the lower one not so much. I'll move on from this to try other things and maybe from other projects I'm able to get the answer to this. Thank you again for your feedback and tip!

  0