Display, Border, Border-shadow, Radius, etc.

Community feedback

• 

  Joran Minjon•610

  @DrKlonkPosted almost 3 years ago

  Hi Luka, nice to see you on the platform!

  Some (unordered) things that stick out to me:

  The centering doesn't really work on smaller screens, as Simone pointed out. Use margin auto, flexbox or grid for this to keep it nice and responsive.

  It seems like the responsive.css is the same as style.css. No need to repeat everything in a media query, just the things that are changing.

  The border radius of the card seems a bit off, I think it can be just one value.

  Using rem instead of px is usually preferred, because it increases responsiveness and thereby accessibility.

  Naming classes is hard, but can definitely be improved here. Try to come up with something that describes the content of the element. "Annual-plan" is a decent name in that sense, "div-button" is not. You might want to call that "button-group". Also "rand-text" suggests the text to be random, which it is not.

  Naming things is super important, even more so when collaborating with others.

  The annual-plan class can be centered more cleanly by removing max-width and left properties and introducing margin: 0 2rem or something similar

  Marked as helpful

  0
• 

  Christian Holm•500

  @MadmandenPosted almost 3 years ago

  Great work Luka! The padding on the card is a bit off though it seems.

  0
• 

  Luka•320

  @lukakavtarraPosted almost 3 years ago

  Report shows me 3 accessibility issues ... can someone explain how to solve them?

  0

  ---

  

  Simone•170

  @Giulo25Posted almost 3 years ago

  Hi @lukakavtarra you should use semantic tags to structure your html. I suggest you use the <main> tag to wrap all the code and enhance the indentation to make everything more readable. Then to keep the card always in the center I suggest you use margin: 0 auto, not position: absolute

  1

  

  Luka•320

  @lukakavtarraPosted almost 3 years ago

  @Giulo25 Thank u so much it helped - 0 issues

  0