View source for Websites/Mozilla.org/Archive/Screen optimizations

A page we can use to track screen optimizations that can be used as input into the set up of media queries to tweak the site for small and large screens. See [https://bugzilla.mozilla.org/show_bug.cgi?id=492609 bug 492609] for more background. 

''The following was noted viewing the site on IE 7 with a resolution of 1280x1024:'' 

'''"Looking For..." text/link'''<br>&lt; 970 px: Overlaps with red background, difficult to read<br>Line splitting: <br>490 - 710 px: Splits into two lines <br>405 - 490 px: Splits into three lines <br>200 - 405 px: Continued line splitting until 200 px, below this text is cut off 

'''"mozilla.org" title bar''' <br>&lt; 730 px: "mozilla.org" overlaps righthand links <br>&lt; 500 px: Lower red bar extends leftward beyond gray bar <br>&lt; 470 px: "mozilla.org" begins to be cut off on right side <br>&lt; 430 px: Righthand links extend the gray bar leftward 

'''"We believe" text block (including 3 columns beneath it)''' <br>1190 px: "We believe" splits into two lines <br>&lt; 1100 px: All-caps column headers begin splitting to three lines, starting with "We're a public benefit organization" <br>950 px: "Read more..." link block begins to overlap "We believe", pushes text to one line <br>910 px: "We believe" is split to two lines again <br>770 px: columns begin to overlap each other, "Read more..." begins to extend leftward beyond gray title bar 

'''Right sidebar ("Get Involved" image, "Community Ticker," "Get Mozilla Gear")''' <br>The bar itself retains its appearance, but it begins interacting oddly with other components of the page: <br>915 px: Overlaps "Our Projects" block so that block extends below "Community Ticker" <br>810 px: Begins to overlap rightmost column of text beneath "We believe" <br>770 px: "Latest News" text is obscured by white <br>690 px: "Get involved" image begins to overlap "We believe" text <br>530 px: "Community Ticker" completely covers text columns 

'''"Our Projects" block''' <br>870 px: "1 of 6" page indicator begins to collide with "View all" text <br>750 px: Firefox logo is suddenly covered by gray background color <br>560 px: "1 of 6" extends beyond block 

'''"Latest News" text''' <br>920 px: "View all" link splits into two lines <br>680 px: Text which was obscured by white (see Right sidebar, 770 px) now appears again, split onto numerous lines 680 px: White obscuring of text begins again <br>560 px: Text compltely covered 

'''Gray footer block''' <br>990 px: Mozilla logo on left begins to be covered by gray <br>930 px: Headers (specifically "Our community") begin splitting to multiple lines <br>650 px: Columns begin overlapping each other <br>280 px: Columns fall below logo rather than remain on same line as it (though they've become illegible by this point anyway)