Fylo Component - Basic HTML & CSS

Community feedback

• 

  Mahesh Yadav•1,220

  @Mahesh-yadavPosted over 4 years ago

  Normally, when container items automatically align as per source order, I do not use flex container. In your case:

  1. body element does not need to be a flex container. the .container and .attribution elements will by default align vertically. You can center them either through margin: auto ortext-align: center.
  2. Similarly 'options-panel' does not need to be a flex container. Instead of using justify-content: space-evenly, I prefer to use margin properties .

  Another comment: You defined .speech-bubble:after styles at two places: one each for desktop and moblie. Many of the properties are repeated with same values. When creating mobile design, we can define only those properties whose value needs to be overridden or are new properties. No need to repeat styles that are common to different layouts

  Your speech bubble is not aligned with progress bar. Right side of both should be aligned vertically. You need to change right property for speech bubble

  1