Question 221618 in Html Question posted in
Some basic documentation can be found here.

Html – Keeping text position in the exact same place for viewport sizes

Is there any way to keep every single thing in my code in the exact same position? For example, my text is positioned with padding and a percentage value and when I change the viewport size, the text moves (probably to fit the padding) Is there any way to change this and keep my text in a fixed position at any viewport size?

Tags:

2

Answers


  1. 0

    Yes, there are ways to keep elements in your code in the exact same position regardless of the viewport size, like with position Absolute, Fixed Positioning, Use Fixed Units, Media Queries.

    Let me give you an example:

    Here is the html:

    <div class="container">
  <p class="fixed-text">Your fixed text here</p>
</div>

    Here is the css:

    .container {
  position: relative; /* This is required to use absolute positioning inside */
  width: 100%; /* Set the desired width of the container */
  height: 300px; /* Set the desired height of the container */
  background-color: #f0f0f0;
}

.fixed-text {
  position: absolute;
  top: 20px; /* Adjust the top distance as needed */
  left: 20px; /* Adjust the left distance as needed */
}

    By using absolute positioning with fixed pixel values, the text will stay at the specified position regardless of the viewport size or device used.

    Login or Signup to reply.
  2. 0

    The fixed div will always be the same size, just use the min property.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width:100%;
      height:100%;
      background:#efefef;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .container .fixed-position {
      min-width:200px;
      min-height:200px;
      background:red;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="fixed-position"></div>
  </div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search