Vanilla CSS with FlexBox Row for certain components.

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

  Hey, awesome work on this one. Layout in general looks great but on mobile state, the layout is not adapting to the screen-size.

  Some suggestions would be:

  • Always have a main element to wrap the main content of your page. On this one, the .card should be using the main instead of div.
  • Also on this one, I would use footer for the .attribution and use this markup:

  <main />
  <footer />
  

  • The music-icon is just a decoration so better hide it. Decorative image must be hidden at all times for screen-reader users by using alt="" and extra aria-hidden="true" attribute on the img tag.
  • Also when using alt attribute, avoid using words that relates to "graphic" such as "icon" and others. An img is already an image/graphic so no need to describe it as one.
  • Good choice using heading tag on the annual-plan but incorrect choice of level. When using heading tag, make sure you aren't skipping a level. If you use h4 make sure that h1, h2, h3 are present "before" it.
  • Also, I just notice you are using inline-block for the .card you don't really make use of this one on an element that is holding like a large content, having the default block is better, using the inline-block as well prevents the element being centered by margin: 0 auto.

  Aside from those, great job again on this one.

  01