On the Case Studies page when clicking on any one of the 4 case studies a lightbox showing that case study will pop-up.
Sometimes the case study content is properly vertically aligned when it’s opened. When you go through all of them, running through the slides within the group, you will find one or two not aligned properly (not centred).
However if you resize the browser window whilst a case study is open, it will reset the slide settings and properly centre the content. Then look at other case studies and again there will be problems with alignment until the user resizes the browser window whilst the case study is open!!?
This slideshow has been built manually.
I’m getting the impression something needs to reset in the code once a case study case been viewed?
In each slide, instead of placing a container, add a div, give it 100% width and height, flex to center.
In this div you can add a grid or any other assets you want to show.
I’ve tried what you recommended but it’s not made any difference. However, I have narrowed down the issue:
Case Study 4, Slide 2 is a YouTube video. If I remove that slide then there is no issues with the slideshow, all works properly in all Case Studies. I think it might be a bug with how this video is setup in Webflow?
There is definitely an issue with the positioning of videos inside a flex box including using an embedded iframe video. I know this because if I take out the video all the slides in all the case studies are lined up properly.
On that basis I got creative and thought of a hack solution: I have created the (YouTube) iframe embedded video to sit on top of a transparent image background (using absolute positioning) which ensures the holding div container box functions properly which is a child of a Flex box.