Responsive Single Price Grid Component using HTML, CSS

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi @anisha463! Well done on this challenge, it looks great and it's very nicely responsive. I would just suggest adding a max-width to the card so that it doesn't stretch too much on big (big) screens.

  One thing that I think could be worked on is the way you use heading elements. Headings in general should make sense in the hierarchy of the document. So here, the main heading of your card is 'join our community' and not really the price of the subscription, even though the price font size is bigger. I realise that this can be confusing since the default browser styling shows h1 as the largest, h2 a bit smaller etc. but try to look at the logical structure of the content, you can always change styles with CSS.

  I just came up with this wild metaphor that you may find helpful:

  Think about your page or component like it's The Lord of the Rings - that's h1, the main title. Then you've got parts - so The Fellowship of the Ring, the Two Towers and The Return of the King would all be h2. Chapters within those parts - h3. Titles of scenes within those chapters would be h4. If you wanted to divide those scenes into smaller parts and give those titles, that would be h5. You get the gist :)

  Here's an article talking about why getting the headings right is important

  Hope this helps, let me know if you have any questions :)

  2

  ---

  

  Anisha Singla•55

  @anisha463Posted over 3 years ago

  Hi @AgataLiberska. I added a max-width to the card. Thankyou for the suggestion.

  Yeah, I wasn't so happy with using the heading elements as well. I just focused on sizing rather than the meaning. Will change that too.

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @AgataLiberska

  +1 for a metaphor with The Lord of the Rings. 😆

  0

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @ApplePieGiraffe thank you very much 🤓

  0

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @anisha463 happy to help 😊

  0