[Vuejs]-My my Ui is distorted on opening inspect Element?

The exact same thing will happen if you resize your browser window. That’s all that happens when you open the dev tools, the portion of the browser window that shows the website becomes smaller.

Generally, you should fix your website to work better in different window sizes. But if you just need to work around it for now you can click the ... menu in dev tools and open it vertically on the side of the window instead of the bottom, or even pop it out into it’s own window.

Generally, it is because there’s too much assumptions on the UI such as setting 80vh on the hero image (which will not have enough space when the screen height is small).

You can try to set min/max values to your hero image component (such as min-height: 300px) to solve this.