Elements move around when zooming in or viewport size changes

As you can see here I’m trying to keep the image above the red container at an exact position but when I zoom in or change the size of the screen, the image isn’t at the place I want it to be, it moves left of the page. (Try zooming in the page yourself or sliding the slide all the way to the right in editor mode, to see what I mean).

I’ve tried everything from absolute and relative positioning and making the image an inline-block and block. This is really hard for me to get.

https://codepen.io/hiashley-the-bashful/pen/VwzzeJj

Hi @ashley31836,
I tried your code, but I don’t have the problem present in the slides.


Have you already fixed by yourself? :wave:

Yes I fixed it by adding display: flex to the main tag. And wrapping everything. I got this solution from someone else though. I’m not sure about how it works.

I’m also at the beginning but I know that “flexbox” is useful for aligning elements in one dimension, in this way the flex elements adapt to the size of the flex container.

1 Like

Thanks for this. I’ll keep this in mind.

1 Like