31: Odd wrapping behavior as window and screen size decrease

For the reporting of bugs, error messages or things being down / unavailable.
Post Reply
User avatar
bekateen
Posts: 7278
Joined: Tue Sep 09, 2014 5:50 pm
I've donated: $40.00!
My articles: 4
My images: 76
My cats species list: 111 (i:37, k:46)
My aquaria list: 29 (i:13)
My BLogs: 36 (i:125, p:1867)
My Wishlist: 39
Spotted: 136
Location 1: USA, California, Stockton
Location 2: USA, California, Stockton
Contact:

31: Odd wrapping behavior as window and screen size decrease

Post by 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
Attachments
3/4th screen
3/4th screen
slightly larger than 1/2 screen
slightly larger than 1/2 screen
about 1/2 screen
about 1/2 screen
Image
http://youtube.com/user/Bekateen1
Would you like to buy my fish? Click HERE for prices.
Buying caves from https://plecocaves.com? Plecocaves is now sponsoring Bekateen's Fishroom. Use coupon code "bekateen" (no quotes) for 15% off your order.
User avatar
Jools
Expert
Posts: 15204
Joined: Mon Dec 30, 2002 3:25 pm
My articles: 193
My images: 914
My catfish: 239
My cats species list: 89 (i:0, k:6)
My aquaria list: 2 (i:2)
My BLogs: 7 (i:5, p:194)
My Wishlist: 20
Spotted: 422
Location 1: M8
Location 2: Scotland
Interests: All things aquatic, Sci-Fi, photography and travel. Oh, and beer.
Contact:

Re: 31: Odd wrapping behavior as window and screen size decrease

Post by Jools »

Is this now OK?

Jools
User avatar
bekateen
Posts: 7278
Joined: Tue Sep 09, 2014 5:50 pm
I've donated: $40.00!
My articles: 4
My images: 76
My cats species list: 111 (i:37, k:46)
My aquaria list: 29 (i:13)
My BLogs: 36 (i:125, p:1867)
My Wishlist: 39
Spotted: 136
Location 1: USA, California, Stockton
Location 2: USA, California, Stockton
Contact:

Re: 31: Odd wrapping behavior as window and screen size decrease

Post by bekateen »

Ooooh, much nicer. b-)

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.
Attachments
small screen quirk.jpg
Image
http://youtube.com/user/Bekateen1
Would you like to buy my fish? Click HERE for prices.
Buying caves from https://plecocaves.com? Plecocaves is now sponsoring Bekateen's Fishroom. Use coupon code "bekateen" (no quotes) for 15% off your order.
Post Reply