Huddle landing page with flexbox

Community feedback

• 

  Web Frog•1,840

  @MasterDev333Posted almost 4 years ago

  Hi, @Andrew. Great work. You may make mobile responsive following the above comments. It would be great if you add transitions for buttons to make it more smooth. transition: all .3s ease-in-out; Hope it helps :)

  1

  ---

  

  Andrew Talle•10

  @ogAndrewPosted almost 4 years ago

  Thanks for the tip about the transition. I went back and added one onto the button.

  0
• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hi Andrew, you need to use a media query to make this mobile responsive.

  In future challenges you'll find layouts a lot easier if you do mobile styles/layout first and then put the changes needed for larger screen layouts inside a min-width media query.

  But as you've already done the desktop version of this one, you can add a max-width media query instead.

  Top tips are to let block items be block, so you shouldn't need widths and heights on everything. Use max-widths if you need to, and simply add whatever styles you need to make the content stack on mobile.

  Good luck

  1

  ---

  

  Andrew Talle•10

  @ogAndrewPosted almost 4 years ago

  @grace-snow I played around with it a lot using the media query. My biggest hurdle was trying to figure out how to resize the image as the screen got smaller. As well as figuring out how to change width assignments on the containers. Is there a rule of thumb to follow when it comes to setting up containers and different width settings for them? Thanks again.

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  @ogAndrew I rarely set widths on items. I let them fill the space of their containers. That works well with flex-basis on flex based layouts or when used with grid layouts

  0
• 

  Vytas•435

  @vytkuklysPosted almost 4 years ago

  Hi Andrew, Good job at desktop version. As for mobile version there is an important aspect to keep in mind that would be useful for you.

  That aspect is media queries which is basically a css technique that allows you to style a page at different widths. The important trick to remember here is that it is always easier to start with a styling for mobile version first (narrower width) and build up from there (other way around could prove an interesting and educational challenge, too, yet it is typically not as time efficient).

  Hope this helps, best of luck!

  1

  ---

  

  Andrew Talle•10

  @ogAndrewPosted almost 4 years ago

  Thanks got the media query working. Do you suggest any reading materials on how to improve in mobile-first development with media queries?

  0

  

  Vytas•435

  @vytkuklysPosted almost 4 years ago

  Good news! What potentially could be beneficial in your situation is Dani Krossing's video "How to make a website responsive". There he essentially goes through the process in detailed and concise manner. He takes the traditional mobile-first approach and explains why it is a more efficient way of doing things

  0