Responsive huddle landing page using Flexbox, Sass

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey, tediko! 👋

  Nice job on another challenge! I think your solution looks good and is responsive! 👏

  Those intro animations are a nice touch and I like the hover state of the "Register" button! 🤩

  You seem to have set overflow: hidden to div.intro__container in the desktop layout of the site, which makes some of the content of the page unreachable in cases where the height of the viewport is smaller than that of the content. Adding overflow-x: hidden instead should solve that issue. 😉

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @ApplePieGiraffe

  Something else you can try on your next challenge is to mostly use min-width instead of max-width in your media queries. Doing so often goes hand-in-hand with mobile-first design and also means the browser will load fewer styles on mobile devices, making your solution load faster on smaller screens. Just a tip! 😉

  0

  

  P

  tediko•6,680

  @tedikoPosted almost 4 years ago

  @ApplePieGiraffe Thank you for feedback! Noted! :D

  0
• 

  Abdul Rehaman Shaikh•15

  @AbdulRehamanShaikhPosted almost 4 years ago

  I was inspecting your code. Why is overflow hidden on intro__container ? Also the css can be improved. Why use margin : 0 0 0 24px when only you want to use margin-left ? Same for padding. The code is not responsive. Most of the users use mobile for browsing and the code breaks there. For devices with (min-width: 992) it breaks. The scroll is hidden and i cannot see the register button. You can spend more time on writing cleaner code if you are using pre-processor like sass/scss.

  1

  ---

  

  P

  tediko•6,680

  @tedikoPosted almost 4 years ago

  @AbdulRehamanShaikh Thank you for your feedback! Shorthands for margins and paddings are handy, if i ever want to change some value on media queries I don't have to rewrite all longhand properties. Why shouldnt i use that? I hide overflow on container in the intention of prevent animations from stretching the site but now i see that it causes bug that there's no scroll on devices with min-width:992 with small height below 600px (nice catch!). I'll fix that, but except for this bug, I think the code is responsive. I checked on iphone and ipad and it works well. About cleaner code, can you give some examples? It's hard to relate to it since im a beginner and don't know what I do wrong. Thanks!

  0

  

  Abdul Rehaman Shaikh•15

  @AbdulRehamanShaikhPosted almost 4 years ago

  @tediko cleaner code means just not repeating properties which are common to all. For example, if you have button which has rounded corners and some background color, it can be same throughout the project. You just define it once and all is good.

  0