Troubleshoot and resolve misplaced elements in a fixed behavior section

Troubleshoot and fix elements within a fixed section that become misplaced when the screen size changes.

In this tutorial, you'll learn how to troubleshoot and fix elements within a fixed section that become misplaced when the screen size changes. Get to know how to apply margin and section settings so your designs are optimized for different breakpoints.

Transcript

You set your section to a fixed behavior but your elements are moving anyways? I know, it’s annoying. So let’s fix it!

First of all, we need to understand why this keeps happening. While our section is set to fixed, let’s check our elements inside.

Hm, it seems that our margins are set to percentages, which is a fluid unit — meaning that as we’re resizing, the margins are increasing or decreasing according to the screen size. So let’s just change our margins to pixels, which is a fixed unit.

Preview it and perfect, now our elements are not dancing around the section anymore.

All because it will always keep the same pixel distance from the sides, instead of calculating based on the page’s width.

And that’s it! Check out more tutorials at Wix Studio Academy or drop a question below. Bye!