Responsive Clipboard Landing Page using Flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey great work and to make things prettier, I saw that in your css, you specified you background image, but, it is the mobile version background. So in your css, maybe try adding this to your .hero class.

      background: url(./images/bg-header-desktop.png) no-repeat;
      background-position: center top;
  

  that way you load the desktop and positioned it nicely. Or you could use background: url(./images/bg-header-desktop.png) no-repeat center top so that it is declared via one liner.

  Also in your .download class, Instead of making the flex-direction to column, maybe you could just remove that so it will make your buttons at the same row but don't forget to add justify-content: center so that they will be centered

  1

  ---

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Upon further look in your style, I looked in the your repository that, well I think you mistakenly declared your stylings in the media breakpoint at min-width: 1440px without declaring it outside of that scope, what it means is that, your stylings will only be applied 1440px width going up, but how about 1440px going down, nothing will be styled, well there are few but this is a big problem. Maybe you're aiming at max-width and not min-width since min-width goes up, but max-width goes down so it will target users who have their resolution at that point. Refactoring will be really a good idea in here^^

  0

  

  Rizki Alfarid Gusna•70

  @rizkygusnaPosted over 3 years ago

  I really appreciate your feedback! Thanks a lot!

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @rizkygusna Your welcome ^

  0
• 

  Mehmet•285

  @memsbdmPosted over 3 years ago

  in your .image-section and .feature-wrapper add : width: 50%; remove overflow hidden, change right: 2em; to something like left: -20px; and the monitor will be always at the left :)

  1