Custom modal that only fills up part (like 80%) of the screen width and centered

[mdodge-ecgrow]

I am trying to figure out how to customize the styles of this plugin a bit. I have copied the entired CSS file as suggested and imported that into my React project. I tried playing with the [data-rmiz-modal-content] tag and couldn't get it to work right.

[data-rmiz-modal-content] {
  position: relative;
  width: 80%;
  height: 100%;
  /* margin: 0 auto; */
}

When I add that margin: 0 auto; in, the zoom in and out goes to and from the wrong spot on the page. I want the overlay to cover the whole page, but the modal to only cover part of it.

[rpearce]

Hi! Did you try the zoomMargin API option? It's specified in pixels, but if you were to provide a static value or compute one (like zoomMargin={window.innerWidth * 0.2}), it could likely get you most of the way there.