Mobile First Approach Using Just HTML&CSS

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted about 4 years ago

  Hey, great work on this one. The layout on desktop is good, it's just a bit small but is fine and the mobile state is really good as well.

  Suggestion/s would be:

  • Selecting an accordion, some pop ups resizes the container right, it adds some height on it. To prevent that, if you want, you could remove the max-height: 50rem first on the accordion selector. Then in the question-area, you could add a max-height: 440px I used 440px since when you inspect your container, without any selected accordion, the initial height is 440px. Then just add overflow-y: scroll on the selector again. This make sure that the height will stay at 440px even if an accordion's content is big and it won't resize the container. But by doing this, this will add a scrollbar. To remove it, simply add

  .example::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .example {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  

  Just change the selectors name to the container with max-height. That is from w3schools.

  Though that only, since you made this really good and clean markup, just a thing with those radio buttons, making it display: none keeps functionality but removes accessibility. Overall, great work^^

  11
• 

  omisc•115

  @csimomelian

  Posted about 4 years ago

  Yep, looks good. Any challenge, no matter how simple it may seem, has its complications.

  You can increase the line-height value to allow the text breath more, and don't forget to define the alts in the images, is a good pratice.

  11