Mobile-first using Flexbox

Community feedback

• 

  Faris P•2,810

  @FarisPalayiPosted over 3 years ago

  Wow, site layout responds really well with different screen sizes. Nicely done👌

  I don't know if it is applicable to your solution, but a classic solution is to make an image responsive is by adding this css properties to the img. And it doesn't mess up the aspect-ratio of the image.

  .responsive {
    width: 100%;
    height: auto;
  }
  

  Also, you can use the picture and source tags and srcset attributes to change the images according to your needs. For example, different images for different media queries.

  And also, if the image doesn't provide a context to your site, you can use the background-image css property to set it as background image. Also, it is really flexible.

  Here's a bunch of links that might help you: w3schools, MDN, developers.google, css-tricks.

  Have fun coding ✨

  Marked as helpful

  0

  ---

  

  P

  visualdennis•8,375

  @visualdennissPosted over 3 years ago

  @FarisPalayi thanks a lot for your detailed answer and the links! What i generally wanted to avoid was actually that the image gets 100% or quite big in tablet version, because then no text is visible on the page, so from user point of view, seeing only an image with illustration and brand-logo might not give much clue to the user what the website is about, so i wanted to at least a part of text always visible in any version. Therefore i had to do fixed width or height.

  But once i've done that to tablet version and when i set width: 100%; height: auto; (as you suggested) in the desktop version, it made image oversized and either text or image started to overflow the div. Thats why using only percentage approach did not work for me. I'll look further into those links you have shared, thanks again!

  1
• 

  Nebiyou Ersabo•185

  @NebiyouErsaboPosted over 3 years ago

  looks great! try to include the social media link/icons in the footer tho

  0

  ---

  

  P

  visualdennis•8,375

  @visualdennissPosted over 3 years ago

  @Nebiyou12 thanks!

  0