I'm using Radio Button on the Accordion Card FAQ without JavaScript

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted almost 3 years ago

  Hi Nurcholis, the automated feedback shows that the html structure is not correct. Some of the issues raised may include the following

  • heading elements and divs cannot be children of a label element. The label element as well cannot be a child of another label element. Try changing the offending labels into divs
  • decorative images can have an empty alt value, other than that, your alt values should be descriptive for the benefit of assistive technology users
  • Preferably use rems instead of fixed values like px especially with your fonts, read the following article for a proper explanation why you should use rems instead of px
  • take a look at the details-summary element for other options on the accordion.
  • using the radio buttons is a good idea as well you only need to sought out the html structure

  Happy coding

  Marked as helpful

  1

  ---

  

  Nurcholis•420

  @cholis04Posted almost 3 years ago

  @ChamuMutezva The above points really helped me in finding some HTML validation issues. I still have a lot to learn more. And I will change the code to solve it. This is very helpful. Thank you for your response. ✌️

  0
• 

  Bashar Khdr•930

  @BasharKhdr1992Posted over 2 years ago

  Perfect Design!. May I ask how did you position the background like that below the illustration-woman-online image ?

  0

  ---

  

  Nurcholis•420

  @cholis04Posted over 2 years ago

  @BasharKhdr1992 I gave the container a CSS property background-position to place the image background according to the design. I also added another property to customize. Here's the code

  .box-faq {
    margin-top: 70px;
    width: 86%;
    background-color: #ffffff;
    background-image: url('../images/bg-pattern-mobile.svg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 72%;
    box-shadow: 0 25px 15px -6px rgba(0, 0, 0, 0.2);
    border-radius: 24px;
    padding-bottom: 30px;
  }
  
  /* For Desktop */
  @media only screen and (min-width: 860px) {
  .box-faq {
      margin-top: 0;
      padding-bottom: 0;
      background-image: url('../images/bg-pattern-desktop.svg');
      background-position: -580px -296px;
      background-size: unset;
      min-height: 480px;
      max-width: 920px;
      display: flex;
      align-content: center;
    }
  }
  

  That's how I position the background just below the illustration-woman-online image.

  0

  

  Bashar Khdr•930

  @BasharKhdr1992Posted over 2 years ago

  @cholis04 Thank you so much for sharing the code man. I will go through it, and wrap my head around it.

  0