How to not move images around and push elements when browser is resizing-CodePudding

This is my HTML and CSS code. If you run this, there will be a image of a macbook and a 'buy' button. When the browser is minimised, the image is alittle off from the center. When it is in full screen, it causes the image to move up and the 'buy' button gets pushed to the bottom. I tried to use position: fixed but it didnt work. How do you make the picture have fixed position in the middle

.new {
  font-family: Arial;
  color: rgb(202, 137, 15);
  font-size: 18px;
  margin-bottom: 15px;
}

.macbook {
  font-family: Arial;
  font-weight: bold;
  font-size: 44px;
  margin-top: 0px;
  margin-bottom: 10px;
}

.supercharged {
  font-family: Arial;
  font-weight: bold;
  font-size: 60px;
  margin-top: 0px;
  margin-bottom: 25px;
}

.price {
  font-family: Arial;
  font-size: 18px;
  margin-top: 0px;
}

.button {
  background-color: #007aff;
  color: white;
  border-radius: 100px;
  font-weight: bold;
  border: none;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 10px;
  padding-top: 10px;
  position: 50px;
}

.button:hover {
  opacity: 0.8;
}

.button:active {
  opacity: 0.5;
}

.charged {
  color: plum;
  text-decoration: underline;
}

.picture {
  margin-top: 50px;
}

<!DOCTYPE html>
<html align='center'>

<body>
  <p class='new'>New</p>
  <h2 class='macbook'>MacBook Pro</h3>
    <h1 class='supercharged'><span class='charged'>Supercharged</span> for pros.</h1>
    <p class='price'>From $1999</p>
    <a href="/text.html"><button class='button'>Buy</button></a>
    <img src="https://images.macrumors.com/t/PV_LL2AlRJvaRvbuXCTUOuDpwzU=/800x0/smart/article-new/2013/09/16-inch-macbook-pro.jpg?lossy" alt="Macbook" class='picture'>
</body>

</html>

CodePudding user response：

Just apply display: block to the <a>-element. When you use display: block on an element, it will try to take up as much width as possible. Seeing as it is not inside a parent container, it will take up 100% width of the <body>-element, as that is the elements closest parent. This way, it won't wrap around the image. The link will however stretch and fill the entire parent container as well. To combat this, apply max-width: fit-content, so the link's width is only relative to its content. Then you can apply margin: auto to center the element again.

For a responsive image, apply max-width: 100% and height: auto. This way it will automatically scale down, as the max-width: 100% property won't let it overflow its parent container (the <body>-element)

body {
  text-align: center;
}

.new {
  font-family: Arial;
  color: rgb(202, 137, 15);
  font-size: 18px;
  margin-bottom: 15px;
}

.macbook {
  font-family: Arial;
  font-weight: bold;
  font-size: 44px;
  margin-top: 0px;
  margin-bottom: 10px;
}

.supercharged {
  font-family: Arial;
  font-weight: bold;
  font-size: 60px;
  margin-top: 0px;
  margin-bottom: 25px;
}

.price {
  font-family: Arial;
  font-size: 18px;
  margin-top: 0px;
}

.button {
  background-color: #007aff;
  color: white;
  border-radius: 100px;
  font-weight: bold;
  border: none;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 10px;
  padding-top: 10px;
  position: 50px;
}

.button:hover {
  opacity: 0.8;
}

.button:active {
  opacity: 0.5;
}

.charged {
  color: plum;
  text-decoration: underline;
}

.picture {
  margin-top: 50px;
  max-width: 100%;
  height: auto;
}

a {
  display: block;
  max-width: fit-content;
  margin: auto;
}

<p class='new'>New</p>
<h2 class='macbook'>MacBook Pro</h3>
  <h1 class='supercharged'><span class='charged'>Supercharged</span> for pros.</h1>
  <p class='price'>From $1999</p>
  <a href="/text.html"><button class='button'>Buy</button></a>
  <img src="https://images.macrumors.com/t/PV_LL2AlRJvaRvbuXCTUOuDpwzU=/800x0/smart/article-new/2013/09/16-inch-macbook-pro.jpg?lossy" alt="Macbook" class='picture'>

CodePudding user response：

By default an image is displayed inline, which is causing your issue. You're on the right track, but instead of position fixed, position: block; would be a better choice.

(You can also centre your image and avoid it overflowing using a max-width and some margin)

.new {
  font-family: Arial;
  color: rgb(202, 137, 15);
  font-size: 18px;
  margin-bottom: 15px;
}

.macbook {
  font-family: Arial;
  font-weight: bold;
  font-size: 44px;
  margin-top: 0px;
  margin-bottom: 10px;
}

.supercharged {
  font-family: Arial;
  font-weight: bold;
  font-size: 60px;
  margin-top: 0px;
  margin-bottom: 25px;
}

.price {
  font-family: Arial;
  font-size: 18px;
  margin-top: 0px;
}

.button {
  background-color: #007aff;
  color: white;
  border-radius: 100px;
  font-weight: bold;
  border: none;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 10px;
  padding-top: 10px;
  position: 50px;
}

.button:hover {
  opacity: 0.8;
}

.button:active {
  opacity: 0.5;
}

.charged {
  color: plum;
  text-decoration: underline;
}

.picture {
  margin: 50px auto 0 auto;
  display: block;
  max-width: 100%;
}

<!DOCTYPE html>
<html align='center'>

<body>
  <p class='new'>New</p>
  <h2 class='macbook'>MacBook Pro</h3>
    <h1 class='supercharged'><span class='charged'>Supercharged</span> for pros.</h1>
    <p class='price'>From $1999</p>
    <a href="/text.html"><button class='button'>Buy</button></a>
    <img src="https://images.macrumors.com/t/PV_LL2AlRJvaRvbuXCTUOuDpwzU=/800x0/smart/article-new/2013/09/16-inch-macbook-pro.jpg?lossy" alt="Macbook" class='picture'>
</body>

</html>