Console moving html elements-CodePudding

I'm on react and I have the next css and html. When I open the console it pushes to the edge of the page. What can i do to make the div be static?

home.js

        <div className="global">
            <div className="box">
            <h1>PY-ROBOT</h1>
            </div>
            <div className='box1'>
            <button type="button" className='button' onClick={handleOnClickLog}>Log in</button>
            <button type="button" className='button' onClick={handleOnClickReg}>Register</button>
            </div>
        </div>


home.css

.global{

    background-color: rgb(46, 43, 43);
    width: 1200px;
    height: 700px;
    margin:100px auto

}

CodePudding user response：

try using the position property.

It's got 5 different values, static, sticky, relative, fixed & absolute. I don't know how & where you want it positioned but play around with the 5 values & you'll get it eventually :)

CodePudding user response：

So I think what you're asking is how to fix the .global container to the centre of your screen so that it stays there even when you open DevTools > Console. If not, could you explain what your overall goal is? For example, are you trying to centre the .global box in the vertical and horizontal centre of the viewport?

What you currently have is this:

A div with class global
the div has a width of 1200px
a height of 700px
a top and bottom margin of 100px
left and right margin of auto

The left and right margin of auto is what centres the div horizontally in the viewport. The margins are automatically sized equally by the browser to place the box in the centre of the viewport.

When you open DevTools (assuming your DevTools panel is docked to the side of your browser, not the bottom), the available viewport width shrinks, which means the browser shrinks the size of the left and right auto margins until the box hits the side of the viewport, at which point the DevTools panel will overflow over the top of the box and you will see scrollbars.

So to fix the box in the centre of your viewport you need to know the size of your viewport, then set the left and right margins of your .global box to be the width of your viewport minus (50% of your viewport plus 50% of 1200px).

E.g., my viewport is 1440px. So on a 1200px wide box I need to set margins to 120px:

1440px - (1440 ÷ 2) (1200 ÷ 2) = 120px

So the CSS to fix the box in the horizontal centre of my 1440px viewport so that it doesn't move when the viewport changes size is:

.global {
  background-color: rgb(46, 43, 43);
  width: 1200px;
  height: 700px;
  margin: 100px 120px;
}

As you should be able to see, the left and right margin will be different depending on the size of your particular viewport.

This is an unreliable way to centre an element because it assumes that every other user of your website has the same size screen as you. It is better to allow the browser to automatically centre things and accept that they will move and flex depending on the size of the viewport, which is what we call Responsive Web Design.

Here is an article describing a number of ways to centre an element in the viewport: How to Center Anything with CSS - Align a Div, Text, and More