Keep things centered?

I’m trying to figure out positioning (relative/absolute, etc) and breakpoints for different size devices. I recorded this video. I basically want the subscribe button in the middle of the image always and the image in the middle when it stacks below the text. I can’t figure it out other than playing with the position buffer numbers which seems like it’s just bound to screw up (as you can see with the moving subscribe button)

Without seeing your setup it’s hard to diagnose the issue, but basically you can accomplish this by making sure the image and button are contained within a position: relative parent container and making the button to position: absolute, which will give you the ability to set it’s position relative to the parent—in this case, slightly overlapping at the bottom of that container.

If you’re still having trouble, just include your read-only link and I’ll take a closer look.

I got the relative/absolute combination (I think). I watched the webflow video on that. I’m having a hard time understanding the centering. It seems like I’m just guessing at padding numbers instead of just telling it to center. https://preview.webflow.com/preview/mappdapp?utm_medium=preview_link&utm_source=designer&utm_content=mappdapp&preview=3aac5e4fa16782027c9baca0aed31641&pageId=5f4aabfd5d6c7b52d9b7e632&mode=preview

I recorded a quick video that covers some changes that I think will help out, but your setup wasn’t too far off—just needed a couple tweaks:

I was good all the way up until we set the new position for the dropdown. For some reason it is way outside the container?!?!

I see that it’s relative to Body 2 in mine. I can’t figure out how to change that

Doh…somehow that container got switched back to static. I’m learning!

Hahah no worries! Switching that back to relative should fix the problem :+1:

Alright, one last thing that I can’t figure out is now the dropdown list isn’t centered on the button.

Fixed it! I had to set the max width on the dropdown container since we changed it to absolute compared to the bigger container, the list was relative to that width. I’m getting good at this :rofl:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.