Single Price Grid Component using Media Queries and FlexBox

Community feedback

• 

  P

  Katrien Schuermans•1,210

  @katrien-sPosted over 3 years ago

  Hi Matthew, yeah, you're supposed to replicate the rounded corners. The design doesn't need to stretch across the entire screen. Imagine how that would look on a 24-inch screen. Doesn't it say anywhere what the max-width should be?

  You could maybe make your min-width a bit smaller. Setting it to 1080px makes the site look too stretched on a tablet.

  Why didn't you use the actual font? Why is the text inside your button a h2? And why isn't it a button but a <div class='button'>. This is very bad for accessibility. A screen-reader would only see all these headings on your site and deem every text as important. Set all text to p and use classes to style them. Adding a class .margin-bottom is a bit odd. Combine the tags in CSS like h1, h2 { margin-bottom: 1em;} Always work towards writing just enough code.

  Give it another go and try to make it really as close to the actual design.

  Marked as helpful

  1
• 

  Matthew Pierce•495

  @shake88juntPosted over 3 years ago

  Crap yeah, I totally forgot to make it an actual button. The margin tip is good thanks, and also making the small screen smaller would look nicer. Appreciate someone actually reading it , ty

  0