Making the position of elements on the responsive view match the print preview in ReactJS?

I would really appreciate any help getting over this hurdle on developing my project. Thank you in advance for any solid reads or help i can get.

I'm creating a printable art app that simply has a menu of images and a blank <div> that's acts like a piece of paper. When you click on an image it gets added to the page and is draggable and resizable.

I have an issue with placement on the view and placement on the print preview. They do not match.

Desired effect: I would like to have a responsive view of the page while maintaining exact positioning of dragged elements on the print

This is the Page.js file with list of images that are inside a Draggable component.

return(    <div id="printPage" className="page">      {images.map((image) => (        <Draggable className="dragContainer">          <img            key={image.key}            className="artImages"            src={image.url}          />        </Draggable>      ))}    </div>  )  

This is the CSS for that component

.page {    width: 210mm;    height: 296mm;    transform: scale(0.75, .5);    padding: 0;    margin: 0;    background: white;  }    .dragContainer {    position: relative;    width: 30vw;    height: 30vw;    transition: box-shadow 0.5s, opacity 0.5s;    will-change: transform;    background: none;    border: 5px solid white;    cursor: grab;    touch-action: none;    touch-action: none;    -moz-user-select: none;    -webkit-user-drag: none;    user-select: none;    overflow: hidden;  }    .artImages {    will-change: transform;    height: 100%;    width: 100%;  }    @media print {    .page {      transform: scale(1, 1);      margin: 0;      width: initial;      height: initial;      page-break-after: always;    }  }  

https://stackoverflow.com/questions/66002431/making-the-position-of-elements-on-the-responsive-view-match-the-print-preview-i February 02, 2021 at 09:22AM