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

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. 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?