Submitted about 1 year ago

FAQ accordion card

arogersrenee• 330

@arogersrenee

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

FAQ accordion card

HTML
CSS
JS

1newbie

View challenge

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

@adityaphasu

Posted about 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

arogersrenee• 330

@arogersrenee

Posted about 1 year ago

@adityaphasu

Thanks! This worked!

Boots 😺• 1,590

@adityaphasu

Posted about 1 year ago

@arogersrenee cheers 🥂

Please log in to post a comment

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