Fylo Landing Page using Sass

Community feedback

• 

  Adarsh Pratap•5,515

  @adarshcodesPosted over 4 years ago

  Hi! @tomboynotes, you did nice work on this challenge👍 let's take a look at your solution from different aspects:

  1. Design aspect

  • Your design looks great. Layout, positioning, alignment, hover-effect, validation everything works fine.
  • You can add cursor: pointer; to the 'get started for free' button.

  2. Responsiveness aspect

  • Your responsive design is working fine, but having some issues like it creates a huge white space towards the right of the page. I can't figure it out by inspecting the developer tool.
  • The size of a top button gets unexpected shape due to shrinking at around 922px.
  • All the content stack to the left side of the screen up to the breakpoint 903px. So you can use padding-left to the container.

  3. Code aspect

  • Your code looks clean.

  4. Issues aroused

  • Great👍, no issues.

  Keep Coding Brother🐱‍💻.

  2

  ---

  

  Shubham Sharma•855

  @shubhamthedevPosted over 4 years ago

  @adarshcodes Hey thanks for the feedback, could you tell me which are the best breakpoints to take because i took 900px, 1200px and 600px as my main breakpoints and these seem to be okay for tablets in portrait, tablets in landscape and phone respectively. What other breakpoints should i take other than these?

  0

  

  Adarsh Pratap•5,515

  @adarshcodesPosted over 4 years ago

  @tomboynotes I don't think there can be a perfect predefined breakpoint for responsive design, as there is a lot of devices with different breakpoints. But standard can be -

  • @media all and (max-width: 1690px)
  • @media all and (max-width: 1280px)
  • @media all and (max-width: 980px)
  • @media all and (max-width: 736px)
  • @media all and (max-width: 480px)

  You can take a look at https://www.w3schools.com/browsers/browsers_display.asp

  It is the statistics of displays that access the web, which is 1366*768.

  So, what I do for responsiveness is-

  • Whenever I complete my Challenge then open the chrome developer tool and on the responsive view, and start decreasing the responsive view.
  • When I found my elements are getting too close or messed together then I remember that particular screen-width and make that as a breakpoint.
  • But, I don't code for that breakpoint, I decrease the width more about 200px-300px and then code for that breakpoint so that, If the site breaks the initial breakpoint then it can hold it till much lower screen sizes(I think I'm confusing😁).

  Let's see what I mean-

  Suppose the first width at which my elements messed up is at 1320px, so I used that in my first media query like- @media screen and (max-width: 1320px) { }

  after that I opened my browser and start decreasing the width of a responsive view, let's say up to 1030px and then start writing the code in my media query which applies after the breakpoint 1320px and also works for the 1030px also.

  Again same make 1030px as second media query breakpoint but code also code for a few hundred lesser sizes.

  I hope I'm clear and helpful to you🙂.

  There may be the best way to do it but I use it so that it fits nearly fine for every type of screen. (My last breakpoint is for 336px). You can take a look at my CSS of previous solutions.

  2

  

  Shubham Sharma•855

  @shubhamthedevPosted over 4 years ago

  @adarshcodes thanks for the explanation and i'll keep these points in mind while solving the next challenge.

  0