Close button and counter float on the picture

[SinnerAir]

Close button and counter float on the picture in mobile if the picture is stretched in height.

I fixed it like this:

.tobii__slider {
    top: 5em;
}

[data-type] {
    height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
}

    [data-type] > figure {
        max-height: 100%;
    } 

[viliusle]

Another option is to let it overlap, but adapt styles in a way, that overlaping would not be a problem.

[midzer]

I'm up for both.
Let's see what others think about this... cc @ocean90

[ocean90]

I'd probably also add a safe area for the top bar and on smaller screens we may want to reduce the size of the button to 44x44px which is the recommended minimum tappable area for buttons.

Edit: The gallery at the bottom of this article does something similar.

[viliusle]

Preview how it can look in small screen.

[midzer]

Looking good.
Let's see how it works out live!

[viliusle]

Another version preview:

• max height - 100%
• max-width - 100%
• top line has black color with opacity 0.5
• works well on mobile / small screen, because image can take literally 100% of screen space.

p.s. image above is not at 100%!