On this version of this test page I’ve created, which includes simply a slider and an overlaid div block with a rich text block inside, I’m having a problem with the responsive design/layout of the div.
When the browser window is resized for a macbook or ipad, both of which im testing on vs my large apple monitor, the bottom of the text block cuts off and therefore so does the text.
I’ve tried all sorts of different positioning, changing the padding and margin, adjusting the overflow settings etc.
I would like that when the bottom of the div hits the bottom of the slider the positioning shifts at the top so that essentially the whole div is moved up and therefore contained, instead of ending up invisible at the bottom.
You’ll need to adjust your positioning on mobile. Right now you have it set to have 20vh on the top on all devices. Simply reduce it on mobile devices.
A problem seems to be that my breakpoints are not behaving as they should. As you will see I have the width of the text div set to 60% on desktop and then 80% on tablet/mobile. But this is not behaving as it should on the IPad Air I am using the test. The box still remains at 60% vw despite the screen size. So even if I change the position from top the div block overspills the bottom of the slide.
Is there no way that the slide can automatically expand downward with the div?
Your iPad is likely triggering the desktop version due to the width being the same. The devices are not recognized by the site, the site responds based on the viewport width. So if your viewport on the iPad is larger than 960px wide, it will show the desktop version.
