Skip to content
Submitted over 1 year ago

FAQ accordion card

arogersrenee•330
@arogersrenee
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Help with SVG positioning

On the desktop view, the position of the orange box only stays in the right spot if the screen with is 1440px wide. Any wider it moves because it's relative to the body. I can't make it relative to the white container because I have the container set to overflow: hidden to account for the illustration SGVs. How would you handle this situation? The box needs to sit on top of the white container and preferably be anchored to that position.

Community feedback

  • Boots 😺•1,590
    @adityaphasuPosted over 1 year ago

    Hello @arogersrenee!

    I tried playing around devTools and there seems to be quite an easy fix for this!

    • Add a wrapper div which wraps the cube image and the div with the content inside.(I didn't use <main> since you already have a main tag inside the white container)
    • Give it position: relative.
    • Now tweak the left and top properties of the cube. This is what I found to be okay:
        top: 42%;
    left: -6rem;
    • This way the cube will be anchored to the wrapper div and won't move away when you resize the window.

    Play around the left and top properties a bit to get the perfect positioning.

    Hoping it gets fixed and Good luck!

    Marked as helpful
    0
    arogersrenee•330
    @arogersreneePosted over 1 year ago

    @adityaphasu

    Thanks! This worked!

    1
    Boots 😺•1,590
    @adityaphasuPosted over 1 year ago

    @arogersrenee cheers 🥂

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord