fylo landing page with two column layout using CSS flex

Community feedback

• 

  P

  Koda👹•3,830

  @kodan96Posted 6 months ago

  hi there! 👋👋

  You should avoid hard-coded values (pixels) most of the time. When you use these values you give up responsiveness(or you make it harder for yourself at least)..

  Typically you will increase the font-size property with @media queries. If you have hard-coded values all over your CSS, you need to modify every element's font-size . On the other hand, if you use rem -s all you need to do is changing the font-size in your CSS :root selector and all your elements will have a new size based on that value.

  I usually use em for padding and margin for text-based elements, since their margin usually based on their font-size , and again, when you change the font-size in :root these values will scale up as well without you touching them, making your job easier and your page maintainable.

  If you are not familiar with the :root selector it's usually used to set custom properties(others call them CSS variables ) that you can apply later.

  When you apply width with pixels you will have a fixed-width element, which also not the best for responsiveness. If you apply width with relative units (like %, vh, vw, ch and a bunch of others) your element will be responsive and will change its width based on viewport size. If you combine this with max-width you insure that your element won't extend above a certain value:

  .element-classname {
    width: 90%;
    max-width: 60ch;
  }
  

  in this example the element will take up 90% of the viewport until that value is less than 60ch, when the element's width reaches this value it won't extend anymore, but it will shrink back down when the viewport size gets small enough.

  Hope this helped 🙏

  Good luck and happy coding! 💪

  Marked as helpful

  1

  ---

  

  Elizabeth Agunroye•70

  @funmeelayoPosted 6 months ago

  @kodan96 Thank you. Your explanation helped a lot.

  1