Advice generator app

Community feedback

• Account deleted

  Hello @OmarCypha700, congrats for completing this component! I would like to notice some points about the CSS.

  There is no need in wrapping your CSS styles in this media query @media screen and (min-width:320px). Why ? Because the CSS rules inside that media query should be applied by default since it is a Mobile First approach. Furthermore under 320px your project lose all the style applied since you are seting the CSS rules just to have effect in screens bigger than 320px up to 920px where the next media query is set.

  If you feel curious check for example how I organized the CSS for the same projec (index.css inside styles folder).

  More on alignment. Flexbox is a great technique to align and distribute space. For example the <image> element inside the dice could be aligned just adding to the <div class="dice"> the following code:

  .dice {
       display: flex;
       align-items: center;
       justify-content: center
  }
  

  Other than tat the styles are pretty close to the design files, so congrats again! And the JS is well organized. Hope to see you around and happy coding!

  Marked as helpful

  0

  ---

  

  Omar Cypha•100

  @OmarCypha700Posted over 2 years ago

  @alexcumplido Thanks for you feedback 👍

  1