Menu icon Foundation
GRID CENTERED COLUMN

Hello Community;

Please I am trying to create a page using the "GRID CENTERED COLUMN" system. Actually I want to create an about us page where I can insert the pictures of the founders together with their names and their titles just like the ones in the picture below. But I am having some issues. Please how to I structure it to resemble the one I have in the picture below? I mean how do I make it look like the one below. Or better still, go here https://www.dragonera.com/about and have a look for yourself.

I just added my code. Sorry for not adding it before.

 

Thanks in advance.Team

Foundationgridcenteredcolumn

Hello Community;

Please I am trying to create a page using the "GRID CENTERED COLUMN" system. Actually I want to create an about us page where I can insert the pictures of the founders together with their names and their titles just like the ones in the picture below. But I am having some issues. Please how to I structure it to resemble the one I have in the picture below? I mean how do I make it look like the one below. Or better still, go here https://www.dragonera.com/about and have a look for yourself.

I just added my code. Sorry for not adding it before.

 

Thanks in advance.Team

Matthew Meaklim almost 3 years ago

Ideally you should post your code so that we can see where exactly you are going wrong.

But here is what you were looking for.

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>About</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4-rc2/foundation.min.css">

		<style>
			.container {
				padding-top: 50px;
			}

			.card-section {
				text-align: center;
			}

			.thumbnail {
				border-radius: 50%;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="row">
				<div class="small-3 columns">
					<div class="card">
  						<div class="card-section">
    							<img class="thumbnail" src="http://placehold.it/128x128">
  						</div>
  						<div class="card-section">
    							<h4>Job Title</h4>
							<p>Name</p>
  						</div>
					</div>
				</div>
				<div class="small-3 columns">
					<div class="card">
  						<div class="card-section">
    							<img class="thumbnail" src="http://placehold.it/128x128">
  						</div>
  						<div class="card-section">
    							<h4>Job Title</h4>
							<p>Name</p>
  						</div>
					</div>
				</div>
				<div class="small-3 columns">
					<div class="card">
  						<div class="card-section">
    							<img class="thumbnail" src="http://placehold.it/128x128">
  						</div>
  						<div class="card-section">
    							<h4>Job Title</h4>
							<p>Name</p>
  						</div>
					</div>
				</div>
				<div class="small-3 columns">
					<div class="card">
  						<div class="card-section">
    							<img class="thumbnail" src="http://placehold.it/128x128">
  						</div>
  						<div class="card-section">
    							<h4>Job Title</h4>
							<p>Name</p>
  						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
	</body>
</html>

P.S. You wouldn't usually include <style> tags within your HTML, I just did for handiness.

Chukwueloka Okafor-Ezisi almost 3 years ago

Thanks Matthew.

I just added my code.

Thanks.

Matthew Meaklim almost 3 years ago

The code I posted should do what you want.