Perhaps this would be better posted in the CSS forum. If so, please let me know.
I'm trying to get my head around all the new HTML/CSS changes that have happened since I retired over a decade ago. Specifically, I'm trying to sort out flexbox and modern ways to account for different screen sizes. To this end I've coded up a 'site' that has, for screens <600px in width, a single column with site logo, site header text, and several 'articles' beneath. It also has a menu sidebar on the left hand side, that slides in on a button press: this uses code taken from W3Schools and modified for what I'm trying to do. For screens >= 600px, the sidebar sits at the left hand side of the screen.
All this works beautifully except for one (possibly quite rare) use case. If a user with a wider screen (a laptop, say) reduces the browser window size below the 600px limit, the menu disappears and the menu button appears as expected. Clicking on the button opens the menu, and clicking subsequently on the close button closes the menu, again as expected; but if the user then expands the window - with the menu closed - above the 600px limit, the menu does not reappear on the left hand side as it should, unless the user refreshes the page. If the user increases the window size above the limit without closing the slide-in menu, it slots into place on the left as a fixed sidebar as expected.
Mobile phone users would be unaffected by this, since their screen width will be below the limit and (as far as I know) cannot be altered. For this reason, tablet users should also, as far as I know, be unaffected, although I haven't checked. So it looks as though the only users affected are wide-screen users who are in the habit of resizing their browser window above and below 600px: probably not a very large number.
I'd still like to get a solution, though, if one is possible, but so far one has eluded me. So I would be grateful for any pointers anyone can give me. The site files are attached.
P.
I'm trying to get my head around all the new HTML/CSS changes that have happened since I retired over a decade ago. Specifically, I'm trying to sort out flexbox and modern ways to account for different screen sizes. To this end I've coded up a 'site' that has, for screens <600px in width, a single column with site logo, site header text, and several 'articles' beneath. It also has a menu sidebar on the left hand side, that slides in on a button press: this uses code taken from W3Schools and modified for what I'm trying to do. For screens >= 600px, the sidebar sits at the left hand side of the screen.
All this works beautifully except for one (possibly quite rare) use case. If a user with a wider screen (a laptop, say) reduces the browser window size below the 600px limit, the menu disappears and the menu button appears as expected. Clicking on the button opens the menu, and clicking subsequently on the close button closes the menu, again as expected; but if the user then expands the window - with the menu closed - above the 600px limit, the menu does not reappear on the left hand side as it should, unless the user refreshes the page. If the user increases the window size above the limit without closing the slide-in menu, it slots into place on the left as a fixed sidebar as expected.
Mobile phone users would be unaffected by this, since their screen width will be below the limit and (as far as I know) cannot be altered. For this reason, tablet users should also, as far as I know, be unaffected, although I haven't checked. So it looks as though the only users affected are wide-screen users who are in the habit of resizing their browser window above and below 600px: probably not a very large number.
I'd still like to get a solution, though, if one is possible, but so far one has eluded me. So I would be grateful for any pointers anyone can give me. The site files are attached.
P.