Huddle landing page using Mobile First workflow, GRID and FLEX

Community feedback

• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  well I think you have a good start on this project and I do not think it is a easy one but I would tell you to go back and look at the hero image as the design transitions from mobile to desktop at the 603px view-port size and see if that is what you really want your design doing. I struggled with making things fluid and then I realized it is more about controlling the design at the different screen sizes and not just making the page scale smoothly

  1

  ---

  

  María Daniela•185

  @mdagudoPosted over 3 years ago

  @palgramming Ohh I noticed that! I'm just confused in how to use @media, I just stick with the sizes the challenge give, but do I need to add more breakpoints in order to achieve that fluency? Thanks for your advice :)

  0

  

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  @mdagudo yes I would say more breakpoints and might have to do breakpoints for individual elements not just the whole page transition at once. If you hold the hero image with a fixed pixel size or make sure you have a min-width on it then it will not go super small or the max-width to keep it from growing too large

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hello, María Daniela! 👋

  Good effort on this challenge! 👍

  A few things I suggest are,

  • Making sure there's always a little bit of space between the image and the text content to the left of it in the desktop layout (even when the width of the screen grows smaller).
  • Adding background-size: cover to the background image to make sure that it always covers the entire area of the screen (even at various screen sizes).
  • Switching to a mobile-friendly layout a little sooner to prevent the image from becoming too small right before the layout changes from desktop to mobile. 😉

  Keep coding (and happy coding, too)! 😁

  0

  ---

  

  María Daniela•185

  @mdagudoPosted over 3 years ago

  @ApplePieGiraffe Hi! Thanks a lot. Your first suggestion is about something that annoys me a little, I noticed how things just kept getting closer and I don't know how to fix that, maybe a min-width in the container will do it?

  0