Responsive landing page using CSS Flexbox

Community feedback

• 

  Jeuri Morel•1,385

  @JeuriMorel

  Posted over 1 year ago

  I've got a few suggestions for changes to your CSS that should fix some of the img issues, like the stretching that occurs when resizing window and should keep the img ratio intact.

  I would replace all the style declarations on .showcase img with a simple height: 100%; and change the max-width: 100%; on the img, picture, svg selector with width: 100%;. A side effect of this is that the logo image will end up being too large at certain sizes, so select it and give it a width: auto;

  In the media query for .container I would add a few declarations so it ends up looking like this:

  @media (min-width: 75em)
  .container {
      flex-direction: row;
      height: 100vh;
      overflow: hidden;
      align-items: center;
  }
  

  I would then remove the media query for the .showcase img.

  This isn't necessary, but I would change the breakpoint for all current media queries from 75em to something like 50em because as it currently is you're using the mobile image at relatively large screen sizes with makes it really blurry.

  Adding the following query will line up the top of the image with the top of the page to keep the face properly in view.

  @media (min-width: 75em)
  picture.showcase {
      align-self: flex-start;
  }
  

  You can play around with the breakpoint numbers to something that looks good to you.

  20

  Marked as helpful