Overflow hidden not working on absolute positioned elements on mobile version of live site!

Design help Layout & Design
1

For some to me unknown reason, when I position an element absolute to make it half visible on the screen, when I apply overflow hidden to its parent element, that elements becomes fully invisible on live site. This only happens on a mobile version of the site.

On read only link you can really see the problem because its present only on live site on mobile version. So here is the live site link: https://modabar-play.webflow.io/

Problem is in the Nasa igraonica za decu section on mobile devices. All 4 images are invisible on real mobile device and if you are looking in the chrome dev tools it won’t let you scroll further.

Is there any explanation what did I do wrong or why is this happening?
Any fixes for this behavior?

If you need any more info feel free to ask for!

Here is my site Read-Only:
(Webflow - ModaBar&Play)

2

hi @borke023 I have not checked your example but what you are trying is maybe misunderstanding basics of CSS positioning.

Issue will be somewhere else as when you change mobile position to landscape these images will show and stay even when you change back to portrait. That should be your starting point.

BTW: images should be wrapped in div element.

3

Thanks a lot, can you explain me why images should be placed in div div elements? When I put them in div everything became visible and work as it should. So I would like to better understand why this happens and why is it the best practice to put images into separate div. Thank you for your help!

4

hi @borke023 technically speaking there is no one correct answer but in general it is a common practice because :

  1. you have more control over image
  2. cross browser stability (eg. in Safari that is more strict about correct code the images which are not wrapped in “container” may stretch its height in certain situations etc.)

The reason most devs put an image into a “container” is because they get some sort of advantage out of it over using an image alone like eg. aspect-ratio locks to relative positioning etc. etc. In some cases, a wrapper is required to achieve certain (more complex) animations as well.

If you are still not clear about why, there is many explanations on internet. ;)

EDIT: When wrapping image that will have eg. figcaption you should change “container” element to figure that is more appropriate wrapper for such image.

1 Like
5

Thanks, you helped me a lot. You explanations are perfect. :grinning:

1 Like