Most of our courses utilize the 12-column grid system to display the page content. By changing the column width at different browser widths, we can make sure our content is always legible and displayed in a visually appealing manner. Let’s take a look at an example.

• For the desktop size, the text is set to display at a 9-column width and the image is set to display at a 3-column width.
• If the page is viewed on a laptop screen, we still have the same grid system, but the browser width is smaller, so the grid system is changed to display with the text at 8 columns and the image at 4 columns.
• Browsers on a tablet screen are even smaller, so the column widths are, adjusted to display at 6 each.

In development, these column designations would look like the following:

<section class="row middle-xs">
     <div class="col-lg-9 col-md-8 col-sm-6 col-xs-6"> text goes here </div>
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 center-xs"> image goes here </div>
</section>

If the image were a banner size, this orientation would be far too small, in all viewports.

Question

What would be the best column designation of a banner image?

Answer

If you said, 12, you are correct! Banner images are usually displayed at a 12-column width in all screen sizes.

<section class="row">
     <div class="col-xs-12"> image goes here </div>
     <div class="col-xs-12"> text goes here </div>
</section>

Let’s review our image orientations in the following activity. Look at each image example and type the image orientation into the box below it. At the end, review your response with ours and see if you’re right!