Are you going crazy with elements misaligning or going in different directions in your site? Breathe and let’s fix it together!
To understand and fix your elements that are all over the screen, we need to talk about docking.
Take a look at this section here. Our title and paragraph are positioned at the same height, but when we change the screen size, they don't stay consistent.
Let's go back to the inspector and check the docking of our elements.
Our title is docked 50% from the top, but our text is docked to the top with a pixel distance (that’s not great - because one is set to a fixed size while the other is fluid).
To make sure the elements move together, we need to keep the same units on the margins. In this case, we simply change the pixel value to a percentage. Let's preview to see if it's fixed... And perfect, it’s fixed!
Now, onto the next section.
Here, the three images seem aligned, but resizing the screen breaks the alignment.
Let's inspect the docking of the images again. Image 1: docked to the top, Image 2: also docked to the top, but Image 3 is docked to the bottom (found our problem!).
Docking calculates an element's position on the page from the docked area as the screen resizes. So, to fix this, let’s make sure all three images are docked to the top by changing the docking on this third one.
Awesome! Let's preview our whole site now. Everything looks great—all elements are resizing correctly and moving together.
Hope you liked the video! Check out more tutorials at Wix Studio Academy or ask your questions below! Bye.
