31: Odd wrapping behavior as window and screen size decrease

[bekateen]

Hi Jools,

Here is a quirky behavior of the webpage, which I observe on my computer if I reduce the size of the open window (see pictures below) and which happens spontaneously when I view the webpage on my mobile phone.

First, with the old page, my experience was that the page needed a fixed width to display; if I were viewing it in IE or in FireFox, and if I reduced the window size, then the right side of the webpage disappeared out of view and I needed to use the horizontal scroll bar to view different areas of the webpage - this worked well because it preserved the visibility of the menu elements across the top and bottom of the page. This same behavior occurred on my mobile device, which compensated by allowing me to zoom in/out to see the missing areas of the screen as needed. That was good.

Currently, with the new page, what I'm seeing is this: in IE 10 and FireFox 34, as I reduce the size of the window, the web page elements are drawn into the center (as if some are left-aligned and some are right-aligned, and they try to preserve that placement as the window shrinks from side-to-side). As a result, the left and right side elements start to crash into each other (competing for priority),
(1) in some cases displacing each other and moving an element on one side of the page up or down to make room for elements on the other (e.g., notice how the species name search box moves down below the "My Fish, My Aquaria..." menu line),
(2) in some cases one element overlaps others (e.g., the top ad banner overlaps the PC logo),
(3) in some cases the elements get reduced from a list to a small icon which acts as a drop down menu (e.g., the menu "CotM, Cat E-Log,..." disappears and becomes a small drop down icon),
(4) and finally in some cases overlapping elements disappear (or seem to) entirely (e.g., in the smallest picture, all the quick links, notifications, etc are all gone).

These same behaviors are the default effects on my mobile phone since its screen is so small to start with.

Perhaps these are just the way the new code works, but it is distracting when the menus (are these what you're referring to when you say breadcrumbs?) disappear or get covered by other items.

Thanks for reading, and keep up the good work.

Cheers, Eric

[Jools]

Is this now OK?

Jools

[bekateen]

Ooooh, much nicer.

One little quirky behavior has appeared, although I think it is probably insignificant: As you reduce screen size, there is one particular small range of window widths that you reach where the new reduced CotM, Cat-eLog, etc.... items appear, justified to the left side of the screen, but the original set of the same commands (which spans the screen in large screen mode) gets minimized to a "quick links" style of icon. The result is, if you click on that icon, you get both sets of command symbols visible at once. (see image)

It's a minor issue because as I reduce the screen size further, then this quick links symbol completely disappears and leaves the viewer with only set of menu items.

[Jools]

I think this is also now fixed.

Jools