How can I adjust div elements so that the website looks the same on devices of different screen sizes?

Question

I have a website where I periodically add boxes (div elements called post-it) to a larger div element(called section) which has a width of 100%. The section element is the whole of the website aside from the headers of the website. I have used absolute positioning for the boxes and I set their location on the website based on top and left pixels.

.section{
    width: 100%;
    height: 1000px;
    margin: 0 auto;
    background-repeat: repeat-y;
    background-size:contain;
    background-color: #8B8B8B;
}

.post-it{
    height: 100px;
    width: 100px;
    font-family: 'Monte', sans-serif;
    font-size: 25;
    padding-top: 56.25%;

}

<header>
    <p>Sample header of webpage</p>
</header>
<div class="section">
    <div class = "post-it" style = "position: absolute; top: 640px; left: 20px;">
    .
    .
    .
    <div class = "post-it" style = "position: absolute; top: 1450px; left: 870px;">
    .
    (arbitrary amount of post-its added at different times)
</div>
<footer>
    <p>Sample footer of webpage</p>
</footer>

When I am on my laptop, I can add a box to the rightmost section of the larger div element and the website display will not be disrupted. However, when I refresh the same page on my phone which has a smaller screen, the whole website is shrunk to the top-left of the browser window and the post-it is idle on a white background which is not part of what I coded.

Also, when I adjust the browser window on desktop, some post-its are cropped out. For reference, I did not use a table on the website for layout. How can I adjust the div elements so that the website looks the same on devices of different screen sizes?

Answer 1

Updated - hardcoding positions

.section should have position set to relative to specify that absolute positioned child elements are anchored to it. You can then try using percentages to ensure the location of child elements stay within .section on different viewports.

However, there is no way to ensure that absolute positioned elements will maintain intended positions without overlapping other elements on differently sized viewports when solely using inline styles and absolute positions.

If you must use absolute positioning, you will need to create ids for each .post-it that you hardcode into the HTML. Then, in your styles.css , specify media queries for different viewport sizes.

I made a demonstration of media queries and absolute positions here: https://codepen.io/sevanbadal/pen/ExjBKEg

This is very tedious because you must hardcode new id s for each .post-it . Then in the CSS you add the id to each media query that you specify.

Original Response - using flex layouts

You can use a CSS Flexbox layout. Check the Mozilla CSS Flexbox documentation for details.

For your problem, apply flex to your "section" class. Then use justify-content to adjust how the arbitrary number of divs will appear inside the flex layout. Flex-wrap can also be used to break the content of the flex-layout into multiple rows.

You will probably want to remove/change the padding from.post-it.

Try this code on.section:

.section{
  width: 100%;
  height: 1000px;
  background-repeat: repeat-y;
  background-size:contain;
  background-color: #8B8B8B;

  display: flex;
  flex-wrap: wrap;
}

And this for.post-it

.post-it{
  height: 100px;
  width: 100px;
  font-family: 'Monte', sans-serif;
  font-size: 25;
}