Demo page: image pulled up too high, covering elements before it

[melanieseltzer]

Not sure if this is isolated to the demo page or the actual codebase (I haven't used it yet), but I'm experiencing this in all browsers on my machine (iOS Chrome, Firefox, Safari).

Issue definition

.pushed-image on the demo page has margin-top: -29vh; applied which is pulling it up too high, covering the content before it.

Expected behavior

Is it supposed to look like this?

Actual behavior

margin-top: -29vh; is always applied.

Steps to reproduce

Go to Demo page and scroll down to One Platform To rule them All section.

[melanieseltzer]

I just realized there's a separate repo for that demo page, should I move this over there?

[cssninjaStudio]

Hello, may i know wich screen resolution you are using ? Of course it is not supposed to be like this. There has to be some media query or css issue. I'll investigate on this. Posting this here is just fine.

[cssninjaStudio]

It seems this is happening under 1088px screen resolutions. This can be fixed with a simple css media query :

@media only screen and (max-device-width : 1087px) {
        img.pushed-image {
           margin-top: -12vh;
        }
}

[melanieseltzer]

Thanks for the reply! I have a large 27" widescreen monitor (resolution 2560 x 1440). Seems like it's actually an issue with the height and not width. Check out this gif - see how when you expand the height past a certain point it starts to overlap? I would think an issue with the vh unit.

Not sure if device-width should be used anymore, since isn't it deprecated...

[cssninjaStudio]

Well I missed it by you are totally right. Since your display is really big, it is a vh problem. Try changing to a pixel or Rem Value instead of vh, it should do it.

[cssninjaStudio]

Fixed in new release.