Information Technology Reference
In-Depth Information
First, we'll render this in the 1140px Grid. Recall that the strength of this framework was
that we could get something similar from Desktop to Mobile. First, the view in Mobile
(Figure 8-12):
Figure 8-12.
Jon's Biosketch rendered on mobile using 1140px Grid
Now, let's look at the view in the desktop browser (Figure 8-13):
Figure 8-13.
Jon's Biosketch rendered on the desktop using 1140px Grid
This is not exactly ideal—the two one-column layouts are stacked in Mobile. However,
in Desktop view, they're shown side by side, and extremely 'squished'. By tweaking
the HTML code, we can alleviate this and make the Desktop version look nicer (see
Figure 8-14) while also maintaining the mobile version. In this case, the problem was
simply that we were using two '
onecol
' boxes instead of a
onecol
on the left, and an
elevencol
on the right (filling up the rest of the screen). The 1140px Grid requires that
