Noreen Whysel - Portfolio

Below shows three row images that use different combinations of row styles to create a gallery page. Each row is a <section> that has three images. Each image is part of a set of markup that includes a heading and a paragraph holding the image. The heading and image are contained in an <article> element.

The w3-row class defines a padded-less container:

<section class="w3-row">
<article class="w3-col s12 m4 l4">

While the w3-row class defines a padded-less container, when you also have w3-container, it adds 16 pixel padding around the entire row, but not between the contained elements:

<section class="w3-container w3-row">
<article class="w3-col s12 m4 l4">

The w3-row-padding class adds a 8px left and right padding to each column:

<section class="w3-row-padding">
<article class="w3-col s12 m4 l4">

You can add as many images as you want and they will wrap according to the w3-col class you set for small (s), medium (m) and large (l) screens. The following is only one row defined by the w3-row-padding class, but since each article is set to span 4 column widths in medium and large screens, it will wrap after the third article.

You can use this page as a template for your portfolio website. Decide which of the above row styles you like and delete the others. You can also delete the training paragraphs unless you want to use these for your own copy.

We will also learn how to correct the uneven image sizes in a later lecture.