CSS3 responsive layout

This week's tutorial covers two further ways of laying out content in a responsive web page using CSS3 flexbox and multi-columns.

In Week 6, the responsive example Learning Journal page was laid out in a single column, 2 columns and 3 columns depending on the screen width of the device accessing the web page. This was done using CSS3 Grid Layout and media queries - http://jh1033.brighton.domains/ci435/tutorials/learningJournal/indexrwd1.html.

This layout is not right for the content in my example Tutorial page, where the step by step instructions in the tutorial are laid out using the 'card' interface design style - http://jh1033.brighton.domains/ci435/tutorials/learningJournal/indexrwd1.html. (See this article for more information about card design - https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/.)

For this lab tutorial either practice on a new HTML page that is not part of your website, or apply the instructions to your Tutorial page if this is appropriate for your content.

Whenever you make any changes to your web pages remember to save them and preview them in a browser to see how they will display. Test the pages on devices with different screen widths - desktop, tablet and mobile - or a mobile emulator (see Week 6).

Flexbox layout - card interface in 1, 2 and 3 columns

In the Tutorial page example the CSS Flexbox layout properties have been used to lay out flexible 'cards' for the tutorial instructions in one, two or three columns.

The images are styled with the following CSS to make them flexible -

img { width: 100%; }

For more information about flexible images go back to Lab Tutorial 7.

The HTML document the tutorial instructions are marked up in an ordered list like this -

<div class="instructions">
    <h3>Instructions</h3>
     <ol class="cards">
          <li class="card">
             <div class="card-content">
               <h4>Step 1</h4>
                 <img src="images/onions.png" alt="">
<p>Instructions: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Sed vulputate erat ipsum. Vestibulum vitae elit in est congue lobortis quis non orci.</p>
            </div>
          </li><!--Repeat until all tutorial steps are marked up as list items-->
       </ol>	<!--Close the list-->
</div>	<!--Close the tutorial instructions container div-->

The following CSS has been used to lay out the tutorial steps in cards in one, two and three flexbox columns. Media queries are used for the two and three column styles to target the required viewport widths -


.cards {
  display: flex;
  flex-wrap: wrap;
}
.card {
  display: flex; 
}
.card-content {
  flex-direction: column;
  width: 100%;
  border: 1px solid #b8860b;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin: 1.25em 1.25em 0.3em 0;
  padding: 1em;
}

/*640 px - tablet portrait orientation - 2 columns*/
@media screen and (min-width: 40em){
  .card { width: 50%; }
}
/*960 px* - tablet landscape orientation and above - 3 columns*/
@media screen and (min-width: 60em) {
  .card { width: 33.33%; }
}

See the finished example and test how it displays in different viewport widths - http://jh1033.brighton.domains/ci435/tutorials/learningJournal/indexrwd1.html#instructions.

If you have any problems laying out your tutorial steps in 3 columns try adding the following rules to your stylesheet -

.media	{
  margin: 0;
  padding: 0;
}
.media li	{
  margin: 0;
  padding: 0;
}

These target the ordered list <ol class"media"> in which the images are marked up and over-ride any margins and padding applied by the browser stylesheet and any styles you may have written for lists. You should put these rules in your stylesheet before the flexbox media queries - just below where you have written your list styles.

For more information about CSS flexbox layout see -

Go to top of page

Multi-column layout

In this example I have marked up text content in a series of <article> elements with <h3> headings and an image. These display in a single column for the small screen layout, but in wider screens the content needs laying out in two columns to make it more readable.

The <article> elements in the HTML document are marked up like this -

<article>
  <h3>Heading</h3>
      <img src="images/onions.png" alt="" > <!--image will be floated-->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...more text</p
</article>

  <hr class="clear" <!--horizontal rule element used to clear the float-->

<article>
  <h3>Heading</h3>
      <img src="images/onions.png" alt="" > <!--image will be floated-->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...more text</p
</article>
etc.

I've written a media query to target viewports with a minimum width of 40em and above. Nested within the query is the CSS that lays out the content in columns -

@media screen and (min-width: 40em){
article { 
  column-count: 2;
  column-width: 20em;
  column-gap:1.5em;
  padding: 1em 2em 1em 0;
  }
/*Makes the heading span both columns*/ 
article h2	{
  color: #900;
  column-span: all; /*col-span property is not supported by FireFox Grrrr*/
  }   
} /*Media query ends here*/

For instructions on how to float an image so that text wraps round it see Lab tutorial 5, Step 4.

See the finished example and test how it displays in different viewport widths.

For more information about CSS multi-column layout see -

If you have any questions email Jennie Harding.

Go to top of page