Solving the About Page Problem: A Smarter Way to Manage Team Layouts

Last week, I received an email from a client struggling with their About page. The issue? The page was set up so that team member images alternated between left and right positions using static order values. While this worked initially, things quickly fell apart as new team members were added or rearranged. The layout became inconsistent, and fixing it wasn’t straightforward.

I wanted to rebuild the page in a way that would make it easier for my client to manage. In this post, I’ll show you how to create a layout that automatically adjusts the position of images and content, no matter how many team members are added, removed, or reordered.

Building the Layout from Scratch

To make the layout more maintainable, we’ll start from scratch.

Step 1: Setting Up the Structure

First, open the list view and add a container to the page. This container will act as the main section.

• Tag: Change the container’s tag to section.
• Padding: Add 80 pixels of padding to the top and bottom, and 24 pixels to the left and right.

Inside the section, add an inner container. This will act as the wrapper for all the team cards. Rename it to “wrapper” for clarity.

Creating the Team Cards

Each team card will consist of two columns: one for the content and one for the image.

Step 2: Adding the Team Card Structure

1. Add a container inside the wrapper and rename it “team card.”
2. Inside the team card, add two containers:
   • Content: This will hold the team member’s name and biography.
   • Photo: This will hold the team member’s image.

Step 3: Adding Content

For the content container:

• Add an H2 element for the team member’s name.
• Add a paragraph block for their biography.

For the photo container:

• Add an image block for the team member’s photo.

Styling the Team Cards

Step 4: Adding Classes

To make styling easier, assign classes to each container:

• Team Card: team-card
• Content: team-card-content
• Photo: team-card-photo
• Wrapper: team-cards

Step 5: Initial Styling

1. Set the team-card container to display: grid.
2. Define a two-column layout for the grid.
3. Add a column gap of 60 pixels to create space between the content and the image.
4. Align items to the center so the text and image are vertically aligned.

Duplicating and Spacing Team Cards

Once the first team card is styled, duplicate it to add more team members.

Step 6: Adding Space Between Cards

To create space between team cards:

1. Set the team-cards wrapper to display: grid.
2. Define a one-column layout for the grid.
3. Add a row gap of 80 pixels to separate the cards vertically.

Now, you can duplicate the team card as many times as needed to add all team members.

Responsive Adjustments

Step 7: Stacking Cards on Smaller Screens

On smaller screens, the layout should stack vertically.

1. For the team-card container, change the grid layout to a single-column layout.
2. Adjust the order of the photo container so the image appears before the content.
   • Set the team-card-photo order to -1 for tablet and mobile views.

This ensures the layout stacks properly while maintaining the desired order.

Challenges with Static Orders

Initially, I tried manually adjusting the order of images to alternate between left and right positions. While this worked temporarily, it created problems when adding or rearranging team members.

For example:

• Adding a new team member required manually resetting the order values.
• Rearranging team members caused the layout to break, as the static order values didn’t update automatically.

This approach was tedious and error-prone, especially for clients who aren’t familiar with CSS or layout settings.

Automating the Layout with Advanced Selectors

To solve this problem, I used advanced CSS selectors to automate the layout.

Step 8: Using Media Queries

First, ensure the changes only apply to desktop layouts.

1. Use media queries to target the desktop breakpoint.
2. Leave tablet and mobile layouts unaffected, as they already stack properly.

Step 9: Selecting Odd-Numbered Cards

To alternate the image position, select every odd-numbered team card using the nth-of-type CSS selector.

1. Create a new selector:
   • team-card:nth-of-type(odd)
2. Apply this selector to the team-card-photo container.

Step 10: Adjusting the Order

For odd-numbered cards, set the team-card-photo order to -1. This moves the image to the left side of the layout.

Testing the Automated Layout

With this setup, the layout automatically alternates the image position for odd and even team cards.

Adding a New Team Member

When you duplicate a team card to add a new member:

• Odd-numbered cards automatically move the image to the left.
• Even-numbered cards automatically move the image to the right.

Rearranging Team Members

If you rearrange team members (e.g., promoting someone to the top of the list), the layout adjusts automatically based on their new position.

Wrapping Up

This automated approach makes it much easier for clients to manage their About page. Whether they need to add, remove, or rearrange team members, the layout handles everything dynamically without requiring manual adjustments.

It’s always a little embarrassing to revisit old projects and see how you used to do things, but that’s part of web development. If you’re not a little embarrassed by your past work, you’re probably not growing.

By learning new techniques like this, you can go back and refactor older projects to make them more efficient and user-friendly. For this client, the improved layout will save them time and frustration, and it was absolutely worth the effort.