FAQ Accordion with Flexbox

Community feedback

• 

  Patrick Bryan•180

  @pbryan9

  Posted over 1 year ago

  Good job SyuusukeFuji!

  I feel ya, images are painful. Sometimes it can help to stick the image into a wrapper (div or similar) and give the img a width of 100% -- that way you can control the size a little more easily by styling the wrapper.

  The box image in particular lends itself to a pattern that I reach for over and over again since it wants to sort of straddle the edge of its container. One reliable way to do that is to set the image's parent element to position: relative;. Then, make the image position: absolute; left: 0;. That'll make it bump right up against the left edge of the container; to get it to split the line, you can add a transform: translateX(-50%); to the image and it'll wind up right where you're wanting it (this pattern works just the same for right, bottom, whichever - just get the translateX / Y and the +/-50% set correctly).

  On the other illustration, I think there's an issue with the background-position property...it seems to behave a little bit better when I take that away completely, so toning down the values might get it to sit closer to where you're wanting it. It most likely needs to be positioned by its left edge.

  Keep up the good work!

  01

  Marked as helpful