Toggle btw annual & monthly bill

Community feedback

• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Hey there,

  congrats on completing the challenge successfully! Your JS seem to work fine to toggle.

  Also it is nice that everything is responsive. (Although i'd say for tablet layout, the sections stretch a bit too wide, perhaps a max-width in combination with centering on the page would be better looking, but just a suggestion)

  • height:auto; is already the default, so you don't need that.

  • Also I'd say try to avoid giving fixed heights like this: height: 50rem; use only min-height when necessary, but most of the time you don't need any height. Height should be decided by the content of the container, if needed simply tweak it with paddings and margins of the contents. Fixed heights are known to cause various issues, resulting in overflowing content when data or font-sizes change.

  • You could here for example give extra paddings/margins instead.

  Hope you find this feedback helpful!🤗

  Marked as helpful

  2
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, @vinuman! 👋

  In this case, all the content should be inside the <main> landmark. There should not be any <header> element.

  <header> is used to wrap navigation links and logo. In this case, there is none of them. So, <header> should not exist.

  I recommend creating the toggle button with two radio inputs. Also, make sure each radio input gets labeled. This way, the users can toggle the price by clicking the labels—annually and monthly.

  You can see the Pen of Scott O'Hara (an accessibility expert) for your reference: Radio Toggle Switch

  The prices should not be <h3> elements. I recommend making them <p> elements instead.

  Replace all the <h4> elements with a list element. Those content should not be headings. They should be a list with three bullet items.

  I recommend using the CSS border properties to create the line instead of using <hr> elements.

  I hope this helps. Happy coding! 😄

  Marked as helpful

  0