Responsiveness

[reynoldtan]

This PR will focus on basic responsiveness for the tiles, content and funders regions. The intent is not to fully support mobile but rather to ensure that the site adjusts to a variety of browser sizes without the layout breaking.

Core Goals

• Allow tiles region to resize based on browser window size.
  • When the browser window is within a normal range, the tiles should resize smoothly.
  • When the browser is much wider than tall then tiles should snap to a specific ratio and instead allow space to grow on the right hand side. The left margin will also increase a bit to provide room to breath.
  • When the browser is much longer than wide then the tiles should again snap to a specific ratio again to best optimize the space.
• Ensure that the main content and funders regions resize with the tiles region.

Testing

For ease of testing, this PR is live on https://activating-crops.usask.ca.

Since we are testing how the webpage responds to resizing, the best way to test this PR is to simple resize your browser window from small to large and across different ratios.

Take screenshots highlighting anything that feels off.

Note: The change to the footer design noted by Reynold was added in another PR and is as expected.

[reynoldtan]

Couple of layout issues

1. Right side end of the footer has dimension caused by areas partially converging.

2. Title of funders section merges with the articles. (fix is in the latest commit)

3. Article titles rendered in tiles section (fix is in the latest commit)

[ruobinLiu]

I've done my test according to the "Core Goals" section on all three browsers (firefox, chrome, and safari) that I have been using, and it all went great.

I find possibly another layout issue is that when the site is enlarged to over 100%, I see this water drop wallpaper thing on right side of the page in all three browsers:

[reynoldtan]

Some layout issues (fixes are in the recent commit)

Extra white space between the left edge and the tiles.

Uneven right edge alignment

Right side end of the footer has dimension caused by areas partially converging.

The fix will even out the alignment of left and right edges of content area by making the content area the same width as the tiles section.