Using Floating Divs, and absolute position dropdowns issue
Posted: Thu Oct 27, 2016 5:47 am
Hi
We have a row of floating divs. When you hover over them, their respective dropdown menu shows. Perfect.
When it's down to a mobile width, the DIVs tile (so they don't take up too much vertical real-estate), but when you tap on them the 'dropdowns' go outside of the page width, causing the page to expand on a phone, and shrinking the page (to fit it all in the screen).
So my question is... is it possible to set the dropdown DIV to be full width of the screen, directly below it's parent DIV?
I have attached an example of what it is doing, and what I want it to do.
I'm using position: relative for each div and position: absolute for the dropdowns.
We have a row of floating divs. When you hover over them, their respective dropdown menu shows. Perfect.
When it's down to a mobile width, the DIVs tile (so they don't take up too much vertical real-estate), but when you tap on them the 'dropdowns' go outside of the page width, causing the page to expand on a phone, and shrinking the page (to fit it all in the screen).
So my question is... is it possible to set the dropdown DIV to be full width of the screen, directly below it's parent DIV?
I have attached an example of what it is doing, and what I want it to do.
I'm using position: relative for each div and position: absolute for the dropdowns.