Viewport zoom out

HTML & CSS
1

I have along the lines of

<meta name="viewport" content="width=device-width, initial-scale=1">

However, I don’t know if there’s a problem with my code, but a user is able to zoom out and view div/s that are meant to be out of view.

I have a notification panel with a right margin of -400px. On click of a button, the panel gets added a class which makes it slide in. The problem is on mobile devices, if a user is to zoom out, the notification panel becomes visible.

Is there anyway to restrict the view/zoom out, but allow zoom in?

Thanks

2

don’t use px - if you change that to a % or em value then it will adjust with the zoom and stay off the screen.

3

changed to

margin:208px -24em 0 0;

margin:208px -240% 0 0;

deleted css on server and re-uploaded, still the same problem. May just opt for jq slideIn instead of css margin transitions

4

How are they out of view exactly?

If you are just using a margin to shift them then they are not really out of view as such. Does the parent div have overflow:hidden so that stuff outside is hidden? Just placing elements to the right isn’t going to make them disappear as such from wider screens unless you are hiding the overflow.

5

Ah ye I see, thanks. Indeed it’s just the margin that was pushing the div out of view. The parent is the body. Not a lot I can do here I think because of a full width image, header and footer.

If display is none, and added class on click has display block, the view is fine, but obviously just seems like a quick fadein and not slidein.

Back to the drawing board I think!

Thanks

6

Suppose a timeout function would do it… set to display none with negative margin applied…
on click change to display block… timeout…slide in. then slide out…timeout display none.

seems more hassle than its worth though

7

I think you could just add a wrapper around the slider and set it to 100% width overflow:hidden. You can then just slide the panel in as normal then. Maybe set opacity to zero and fade it in with css as well…

I would use transform:translateX() rather than margin as it is smoother.

8

sweet, thanks.

was thinking of applying width 0 and using .animate for width change

9

That should work but would give a concertina effect although if you have content inside this element you may find the content inside doesn’t animate. Transforms are still smoother though.

10

went with your suggestion, thanks!

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.