FAQ Challenge (SVG Doesn't load when used as Background image)

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Saleh! 👋

  Regarding the problems that you have.

  1. I recommend keeping it simple by only having one media query to adjust the max-width of the container. So, for mobile you can set the initial max-width and then a media query to adjust the max-width of the container for dektop layout.
  2. I strongly recommend against setting any width and min-width to the body element. It usually cause an overflowing issue if they set min-width: 100vw or width: 100vw and set width: 100% is useless because by default the body element has already full width. min-height and min-width are not a fixed size, they allow the element to grow however not to shrink until the minimum size is set. For min-height, it is usually used to center the card element by making the body element as a flex container of the card element (it's possible to do it on this challenge).
  3. Which SVG that you are talking about? The SVG should be either the background image of the card element or an img element that lives inside the card element with empty alt="".
  4. The same question as above. However, it's usually because of the file path issue. When working with GitHub page, it's best to always put a dot before the forward slash so only either ./ or ../ (don't only use forward slash /).

  Two feedback for this solution

  • Use HTML native elements for the accordion, details and summary tags. The current accordion is not accessible by keyboard and screen readers. Also, in general, there's should not be a click event for non-interactive elements, always use interactive elements (e.g. buttons, ect).
  • Use forEach instead of for loop. It makes your code easier to read and more modern.

  Hope this helps. 😊

  Marked as helpful

  1

  ---

  

  Saleh•390

  @SalehAbuhusseinPosted over 2 years ago

  @vanzasetia Thanks For Your Awesome Tips 🥰 That was helpful I will apply it in my next challenge. 3. The SVG I am talking about is the women SVG I added padding to the top of the body so that the SVG is visible to the user.

  It was my first Time Doing Javascript Challenge but what I struggled with was the CSS that's silly 😅

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Honko-o No problem! 👍

  I knew how to make the woman SVG appear as the background image! Currently the file path is ../../images/illustration-woman-online-desktop.svg while the images/ folder only at one level above instead of two. So now, you should know the correct file path for it. 😉

  Marked as helpful

  1

  

  Saleh•390

  @SalehAbuhusseinPosted over 2 years ago

  @vanzasetia Thanks For your Answer 🥰🥰 I noticed a lot that was really helpful answer and I fixed the SVG paths problem.

  0
• 

  P

  Mohammed BAHNINI•1,060

  @mohammedbahniniPosted over 2 years ago

  Hi there , check my solution you might get a little help , even i am not a super star in css , but i hope it helps a little bit . (https://www.frontendmentor.io/solutions/accordion-card-component-SyQxOIwS5)

  Marked as helpful

  1

  ---

  

  Saleh•390

  @SalehAbuhusseinPosted over 2 years ago

  @mohammedbahnini Thank you Bro 🥰 I am gonna check it.

  0