Last post Jun 30, 2016 06:06 PM by madjester
Jun 28, 2016 11:16 AM|madjester|LINK
When the width of my page is 965 pixels and above there is a rectangle in the middle of my page whose perimeter is formed by four unordered lists (top, left, right, and bottom).
When the width of my page is less than 965 pixels, the vertical unordered lists which form the left and right sides of the rectangle are converted into horizontal unordered lists.
Then the left, right, and bottom unordered lists (all are now horizontal ) are placed in the Div called RowHolder which already contains the top unordered list. Then all four unordered lists are made to stack using the Z-Index property.
The problem I'm have is that the script works great except when the page width is between 948px and 964px; the unordered lists are not stacking at these widths.
This problem doesn't show up in Chrome Dev Tool for some reason. Please click on this link
https://jsfiddle.net/jQing/dk1hz8gw/1/ to see my Markup, CSS, and Script.
Jun 29, 2016 08:30 AM|Fei Han - MSFT|LINK
no display issue
Jun 30, 2016 06:06 PM|madjester|LINK
Hi, thanks for replying.
I have traced the changes to my HTML structure and as I already mentioned, the unordered lists stack like they were supposed most of the time except when the user's screen width is between 948 and 965 pixels.