How do i make the display fit?-CodePudding

https://i.stack.imgur.com/rDst8.jpg

How do i fix it? I want to make it like this https://i.stack.imgur.com/m2Jfh.jpg

The first image is my website when i use normal mode / phone mode

The second image is my website when i use desktop mode in my phone

My css:
text-align: center;
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  font-size: calc(10px   2vmin);
      color: white;

CodePudding user response：

To make it look more like the first image, you need to specify a viewport (if you haven't already) before </head> with this code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

If you reload, you will probably see that it looks much better.

Next, you should also specify a max width in your CSS:

max-width: 90%;

You should also add a margin to the sides:

margin-left: 5%;
margin-right: 5%;

CodePudding user response：

You can use flex: wrap; to fix it, and It can be done in many ways. you can explore the flex and grid properties in here, https://developer.mozilla.org/en-US/docs/Web/CSS