HTML/CSS only solution, responsive

Community feedback

• 

  Agata Liberska•4,075

  @AgataLiberska

  Posted almost 4 years ago

  Hi @ellienndea, well done again! Positioning those svgs is really tricky, I rememeber struggling with them quite a bit! As for your questions:

  1. I don't think the h1 moves at all, it stays centered within it's container which is the <main> element. It looks like it's moving to the side because the container is growing, but the accordions are not. You've got quite a large right-margin on all your <detail> elements (they appear because of the max-width that is set) It may be a good idea to just set a max-width to the .container div, and let the detail elements stretch to fill out the space, maybe with just a small right-margin to space it out nicely. I think the box svg is also not really moving, just resizing with the other images because they get less space on narrower viewports. I think I would change the media query breakpoint a bit, to allow a bit more space for the images in desktop layout.

  2. As for the second question, I'm not sure what element you're asking about - is is the arrows? That would be the margin created by the max-width :)

  Hope this helps, if anything's not clear, let me know :)

  01

  Marked as helpful
• 

  Ariful Hoque Al Amin•175

  @Ar1f007

  Posted almost 4 years ago

  h1 is moving because you have set text-align to center. So it is trying to stay in the center. Give text-align to left, or just leave it as it is. Image is moving vertically probably because it is absolutely positioned. So with the changes of the screen size, '%' value is also changing.

  01

  Marked as helpful