HTML/CSS only solution, responsive

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 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 :)

  Marked as helpful

  0

  ---

  

  ellienndea•130

  @ellienndeaPosted over 3 years ago

  @AgataLiberska Thank you Agata for your feedback and your help! 🥰 Glad you understood my 2nd question right. 😄 It's all connected. I'll try that out!

  0
• 

  Ariful Hoque Al Amin•175

  @Ar1f007Posted over 3 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.

  Marked as helpful

  0

  ---

  

  ellienndea•130

  @ellienndeaPosted over 3 years ago

  @Ar1f007 Thank you Ariful! That makes sense. I'll try that. 😊

  0