FAQ Accordion. HTML CSS and JavaScript.

Community feedback

• 

  Anne-Sophie•245

  @annesophie22Posted almost 4 years ago

  Hi there :)

  From what I can see, here are some hints that might help you : -- you used position: absolute on your illustration without declaring any parent container as position: relative. Meaning that your image has an absolute position based on the "position" of your body. That's why on desktop, your image is 45px from the right side of the window, and 12px from the top of your window. If your plan was to use position absolute to place your image on the top of your wrapper, then you would need to declare position: relative on your wrapper container.

  -- instead of using position absolute to position your illustration, try to use margin-top instead, by declaring a negative value. Something like -100px worked quite well when I tried in my browser.

  -- the "easiest" way to make your layout responsive is to use flexbox for desktop version. For this to work, inside your wrapper you will need 2 container : 1 for your illustration and 1 for the rest of your content (h1 + your onefaq divs). Then you can declare your wrapper as flex, which should get your illustration just next to the rest of your content. Then you need to play with flex position a bit to get what you want.

  -- Once you're comfortable with flexbox, you can improve your code and css by building your onefaq div with flexbox as well. This means that instead of using position: absolute for your icon-arrow-down, you use flexbox to control its position.

  My advice would be to learn a bit more on flexbox (have a look on css tricks website) and try again this challenge. You'll see that your life will be much more easier than with absolute positioning :)

  Flexbox, grid layouts and declaring width with % instead of with px are some of the best ways to achieve responsive layouts.

  Good luck !

  Marked as helpful

  1
• 

  Ryan•0

  @ryannisbetPosted almost 4 years ago

  Have a research into media queries, this is how you make things responsive for different devices.

  1