CSS Flex

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi TBanda27!

  The answer for your question is that, try to use display: flex and align-items: center on a. That way you can remove the display: inline-block from your .icon-arrow.

  Now for the feedback on this solution:

  • Set the Open Sans font family on body style, that way you don't need to keep repeating the class.
  • The same as the Raleway, on the style-guide.md file is clearly telling the exact elements that use Raleway font family, like Headings, Call To Actions and Header Navigation. Then what you should do, is to set the Raleway font family on headings, buttons, and links on header, that's it.
  • Only use one h1 at a time, you can use other heading tags multiple times.
  • On my mobile device (<400px width), the header fylo logo is stretching, try to figure out the right width and height for it.
  • The curved-background should be a background-image on CSS.
  • For the decorative or meaningless images like illustration, icon arrow, you should leave the alt="" empty.
  • Avoid using !important flag, since there's no point to do that. You can use those flags to override inline styling that generated by some kind of Framework or library other than that, you should avoid using it.
  • The strategy to not use !important is to keep the specificity as low as possible. For instance, you can just directly target the class name without mentioning the element.

  /* Bad */
  section.secondary-section {
    /* Some Styles */
  }
  
  /* Good */
  .secondary-section {
    /* Some Styles */
  }
  

  • Another strategy is to give every element that you want to style a class name. I recommend to use BEM (Block Element Modifier) class name.
  • You don't need font weight classes since by default the headings will use 700 font weight and p will use 400 weight. Also you can remove the 300 font weight since it's not useful.
  • Try to add the form validation using CSS. You can read this article from CSS Tricks about creating form validation using CSS only.

  That's it! Hopefully these informations are useful for you!

  2
• 

  Tawanda•125

  @TBanda27Posted over 3 years ago

  Thanks a lot pal, i will look into your suggestions. I appreciate 👏

  0