I started create my project something like canva.com (I don’t know how can I name it maybe desgin maker or design editor) from scratch.

I added all functionalities eg drag on drop, deleting elements, ability editing text, change color of elements for my project but I don’t have any idea how can I make it responsive for mobile devices. Maybe I need use transform scale for all page but I don’t know how did it right.

I didn’t use html5 canvas. I did my project using Moveable library

This library use transform: translate() to position elements on the board. I figure out that if I use transform translate I can’t control these elements with Grid or Flex aslo Media queries can’t help me. How can I did it adaptive for mobile devices?

I did some codepen reproduce here codepen
// html

<div class="outer">
  <div class="content">
      <img class="image1" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg">
    <img class="image2" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg">
    <img class="image3" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg">
  </div>
</div>

// css

/* there can be more than one image */
.image1 {
  width: 200px;
  transform: translate(200px, 0);
}
.image2 {
  width: 200px;
  transform: translate(100px, 40px);
}
.image3 {
  width: 200px;
  transform: translate(100px, 30px);
}
.content {
  background: #e5e;
  max-width: 500px; /* fixed max width */
  margin: 0 auto;
  min-height: 1600px; /* height can be of any length eg 1000px, 1200px, 3000px ...*/
}
.outer {
  background: black;
  padding: 5px 10px;
}

If we open this code on mobile device it’s not adaptive

what do I expect as a result: I took a screen video and upload it on youtube https://www.youtube.com/watch?v=3DcuAzK9ICw