How to stop elements from resizing>-CodePudding

When I resize my webpage everything goes out of position. The text goes below the container and the image get too wide. How can I make it so everything stays in place when the image gets resized? I looked at a few solutions but none seemed to work for me. Any help would be appreciated!

body {
  background-color: #ADD8E6;
  padding: 10px;
  margin: 0;
}
.hcontainer {
  background-color: #FFFFE0;
  height: 600px;
  text-align: center
}
div h1, p {
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 5px;
  margin: 0;
}
img {
  margin: 0;
  padding-top: 20px;
}
#mini {
  font-size: 13px;
  margin-top: 5px;
}
.imgcontainer {
  background-color: pink;
}
.mcontainer {
  background-color: #FFFFE0;
  height: 600px;
  margin-top: 20px;
  padding-top: 30px;
}
li {
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
}
h3 {
  text-align: center;
}
.list {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
h4 {
  text-align: center;
  padding-top: 20px;

CodePudding user response：

Use percentages instead of px, this will make any elements a relative size when resizing the window.

CodePudding user response：

Use percentages instead of Pixels, And be careful the width of all the components companied should be 100%. So all the components width, the paddings, the margins even the borders counts! All companied should be 100% at the width.

Note: if you want to use borders is make sense more to use pixels so if you set the border for 1px for example you make the other components width companied 99%.

Another thing I recommend to you to learn and use Bootstrap to make responsive website to all platforms.