Long description

Block 1 has 4 browser windows placed side-by-side.

Browser window 1 titled Mostly Fluid has 4 color blocks placed one below other. The first color block and half of the second block fits well inside the browser window. The rest of the color blocks appear outside the browser window.

Browser window 2 is wider than browser window 1 and has four blocks of different colors appearing in 3 rows, fitting inside the browser window. Row 1 has a single color block that covers half of browser window vertically. Row 2 has 2 color blocks of the same size placed side-by-side, covering 25 percent of the browser window. Row 3 has the fourth block covering 25 percent of the browser window.

Browser window 3 is slightly wider than browser window 2 and has five blocks of different colors appearing in 2 rows. There is a border to the left, right and bottom side of the color blocks. Row 1 has two color blocks of the same size placed side-by-side. Row 2 has 2 color blocks of same size followed by a color block, which is slightly larger, placed side-by-side.

Browser window 4 is slightly wider than browser window 3 and has five blocks of different colors appearing in 2 rows. There is a thick border to the left and right side of the color blocks and a thin border at the bottom of the color block. Row 1 has two color blocks of the same size placed side-by-side. Row 2 has 2 color blocks of the same size followed by a color block, which is slightly larger, placed side-by-side.

A double-headed arrow labeled Change in page content display in response to changes in browser width points across all 4 browser windows.

Block 2 has 3 browser windows placed side-by-side below block 1.

Browser window 1 titled Column Drop has 3 color blocks placed one below other. Only 80 percent of the first color block fits in the browser window. The rest of the first block and the remaining blocks appear outside the browser window.

Browser window 2 is slightly wider than browser window 1 and has 3 color blocks placed one below other. Only the first color block fits in the browser window. The remaining 2 color blocks appear below the browser window.

Browser window 3 is twice the size of browser window 1 and has 3 color blocks arranged in 2 rows. The first row has 2 color blocks placed side-by-side. Only the first row of color blocks fit in the browser window. The next row that has a color block appears outside the browser window.

Browser window 4 is slightly wider than browser window 3 and has 3 color blocks arranged side-by-side in 1 row. All three color blocks fit in the browser window.

Block 3 has 3 browser windows placed side-by-side below block 2.

Browser window 1 titled Off Canvas has 3 color blocks arranged side-by-side in 1 row. The first and the third color block appears outside the browser window from the left and right side, respectively. Only the second color block fits in the browser window.

Browser window 2 is slightly wider than browser window 1 and has 3 color blocks arranged side-by-side in 1 row. The first and second color block fits in the browser window, while the third color block appears outside the browser window from the right side.

Browser window 3 is twice the size of browser window 1 and has 3 color blocks arranged side-by-side in 1 row. The 3 color blocks appear inside the browser window with a border inside the browser window to the left and right of the color blocks.