Screen size / breakpoint margins

[artemartemov]

Setting different margins on mobile devices vs larger screens

It would be great to be able to set the mobile zoom to be full width, while retaining a larger margin on larger screens.

Implementation

Maybe have the ability to set 3 width values to a margin map? Not sure if that would be possible, or if there is a way to do this now.

[francoischalifour]

You can achieve this behavior with the current API:

mediumZoom('#zoom-margin', {
  margin: window.innerWidth < 1000 ? 0 : 48,
})

Let me know if your case is more complex.

[edwardhorsford]

I just came here with this exact question.

Might I suggest adding this example to the docs? I'm not a developer and this solution wouldn't have occured to me.

[Arecsu]

Hi! @francoischalifour and @artemartemov I managed to solve this by adding support for css variables while supporting int values as well. CSS variables can be changed with media queries as usual.

Merging this code to medium-zoom would be awesome.

I added var margin below these lines. If something goes bad it will fall back to 0.

var viewportWidth = void 0;
var viewportHeight = void 0;

var margin = parseInt(getComputedStyle(document.documentElement).getPropertyValue(zoomOptions.margin) || zoomOptions.margin) || 0;

Then, replaced the usage of zoomOptions.margin in the code below those lines with just margin

And everything works as expected. It only supports pixels by now. Haven't figured out how to make it work with em/rem or percentage values. But it is still far better than nothing.

For instance, the css code in the page stylesheet would be:

:root {
 --medium-zoom-margin: 100px;
}

@media only screen and (max-width: 1000px) {
   :root {
      --medium-zoom-margin: 40px;
   }
}

@media only screen and (max-width: 650px) {
   :root {
      --medium-zoom-margin: 0px;
   }
}

And the code to call mediumZoom:

const zoom = mediumZoom('[data-zoomable]', {
        margin: '--medium-zoom-margin',
      })

[francoischalifour]

@Arecsu Interesting, I'll consider this when updating the API.