About me, using the responsive table. Photo and text each take up 1/3 of the screen and the final third is split in half as a margin.

 

ABOUT ME

Here’s some stuff about me. I love the ritual of my morning cup of coffee. I’m super-smart. I love learning things and interacting with literature. I’ve been to dozens of countries and believe that any year that I don’t get a stamp on my passport is wasted. I love France and French Indochina for reasons beyond understanding.

 

LEARN MORE

 

The three step call to action process

1.

READ

MY BLOG

 

I post a few times a week about weddings I’ve shot, places I’ve visited, books I’m reading, coffee I’m drinking, and thoughts I’m thinking.

 

READ MORE

2.

VIEW

MY PHOTOS

 

View a gallery containing handpicked samples of my work, including portraiture, behind the scenes shots, engagement sessions, and weddings.

 

VIEW MORE

3.

BOOK

NOW

 

Like what you see? Ready to book? Connect with me and let me know about your event. I’ll get back to you promptly. I look forward to hearing from you.

 

CONNECT

Your new contact form, using the Ninja Forms plugin that Flothemes recommends. (I like it!)

An explanation of how to build responsive columns

To make this work you have to leave the visual editor and play with a little but of HTML, but I’ve tried to make it as simple as possible.

One of HTML’s foundational elements is the div. It’s basically a box. You can put content in divs and divs inside of other divs. Then you can define margins, backgrounds, outlines for your div, as well as how it should sit on the page. Does it go side-by-side with other divs? Does it get a line all its own? That kind of thing.

With CSS, you can define all these characteristics once and give them a label, called a class. We’ve defined 3 main classes to help you build a table cs_responsive_table, cs_responive_row, and cs_responsive_column. So you define a table. And a table has rows. And each row has columns.

Example:

<div class="cs_responsive_table"> 
  <div class="cs_responsive_row">
    <div class="cs_responsive_column">
      <p>This is the first row, first column</p>
    </div> -- this closes the first column
    <div class="cs_responsive_column">
      <p>This is the first row, second column</p>
    </div> -- this closes the second column
  </div> -- this closes the first row
  <div class="cs_responsive_row">
    <div class="cs_responsive_column">
      <p>This is the second row. It has one column that covers everything.</p>
    </div>
  </div>
</div>

Looks like this (with gross background colors added):

This is the first row, first column

This is the first row, second column

This is the second row. It has one column that covers everything.

 

Notice that the colums only take up as much space as necessary. To make things work well, you need to define widths explicitly. The secret is that you get to divide the columns up into the width you want, and then, when the screen becomes too narrow, the responsive CSS will take the columns and stack them vertically.

The Babylonians liked the numbers 12 and 60 because they’re evenly divisible by many numbers. (That why we have 24 hours in the day and 60 minutes in the hour and 360 degrees in a circle.) The Flothemes approach leans on that idea and defines column width is defined in 12ths of the whole. So if you want a column to occupy 50% of the screen you specify width_6. That’s 6/12 = 1/2.

The call to action is in 3rds, so each of the columns is width_4.

The about me sample is width_2, width_4, width_4, width_2. Or 1/6, 1/3, 1/3, 1/6. The 1/6 on either side acts as a margin when your screen is wide enough. When you go narrow and responsive, those spacers just disappear.

Example:

<div class="cs_responsive_table"> 
  <div class="cs_responsive_row">
    <div class="cs_responsive_column width_8"> -- width_8 added to the class
      <p>This is the first row, first column</p>
    </div> -- this closes the first column
    <div class="cs_responsive_column width_4 with_left_border"> -- width_4 and with_left_border added to the class
      <p>This is the first row, second column</p>
    </div> -- this closes the second column
  </div> -- this closes the first row
  <div class="cs_responsive_row">
    <div class="cs_responsive_column width_6">
      <p>This is the second row. It has one column that covers everything.</p>
    </div>
  </div>
</div>

Looks like this (with gross background colors added):

This is the first row, first column it is 8/12 or 2/3 of the width.

This is the first row, second column. It is 4/12 or 1/3 of the width. I also added a left border.

This is the second row. There’s only one column, but it’s defined as 6/12 or 50% of the width.