How to make custom element responsive

Ask the community
, ,
1

Hello, i have wix premium and i want to add on my site my own app that is sth like small game (a lot of html, css and js). The thing is that i want it to change size proportionally if user makes browser window smaller. I think that it cannot be html embedded code, rather custom element. I’ve tried to do this by setAttribute() so that my element knows if the broweser window is smaller, but still nothing worked, can you help me how to achieve it? It can be even with red rectangle, if i know how to do it then i will apply it to my game.

2

It should be as simple as writing CSS that responds to different breakpoints. Something like:

class ResponsiveSquare extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "open" });

    shadow.innerHTML = `
      <style>
        .square {
          width: 100px;
          height: 100px;
          background-color: red;
          transition: all 0.3s ease;
        }

        @media (min-width: 500px) {
          .square {
            width: 150px;
            background-color: orange;
          }
        }

        @media (min-width: 800px) {
          .square {
            width: 200px;
            background-color: green;
          }
        }
      </style>
      <div class="square"></div>
    `;
  }
}

customElements.define("responsive-square", ResponsiveSquare);