I'm new and I cant align my social redirect images to be centered to the "contact me" header. Text align doesn't work and other solutions I found for my problems just puts it in order vertically.
<link rel="stylesheet" href="styles.css">
<style>
.feature {
display: inline-block;
margin: 0px;
padding: 0px;
text-align: center;
}
.feature figure {
display: inline-block;
position: relative;
}
.resize {
text-decoration: none;
width: 128px;
height: 128px;
display: inline-block;
}
</style>
</head>
<body>
[HEADER]
<h1>Contact Me!</h1>
<section class="feature">
<figure>
<a href="url">
<img class="resize" src="images/discord.png" alt="Discord"></a>
<figcaption></figcaption>
</figure>
<figure>
<a href="url">
<img class="resize" src="images/insta.png" alt="Instagram"></a>
<figcaption></figcaption>
</figure>
</section>
</body>
</html>
Play around with the margins in .feature figure. I changed the size of the images and added a border to them so i could see what was going on.
.feature {
display: inline-block;
margin: 0px;
padding: 0px;
text-align: center;
}
.feature figure {
border: 1px solid #ccc;
display: inline-block;
margin: 0 8px;
}
.resize {
text-decoration: none;
width: 64px;
height: 64px;
display: inline-block;
}
[HEADER]
<h1>Contact Me!</h1>
<section class="feature">
<figure>
<a href="url">
<img class="resize" src="images/discord.png" alt="Discord"></a>
<figcaption></figcaption>
</figure>
<figure>
<a href="url">
<img class="resize" src="images/insta.png" alt="Instagram"></a>
<figcaption></figcaption>
</figure>
</section>
Related
I have a problem with text and image.
This is the design that i want it:
I already code this but I have a problem with the text and image
This is in HTML css:
here is the code :
#font-face {
src: url(source/font/SansitaSwashed-Regular.ttf);
font-family: 'Sansita';
}
/* Default Styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Sansita', sans-serif;
}
.container {
height: 100vh;
width: auto;
padding: 0;
}
.feature-showcase {
list-style: none;
width: 100%;
}
.feature-showcase li {
display: block;
float: left;
width: 33.3%;
/*3 li should occupy full width.*/
}
.meal-photo {
width: 100%;
margin: 0;
overflow: hidden;
/*This is to prevent spilling out of images when we scale the images.*/
background: #000;
text-align: center;
}
.meal-photo img {
opacity: 0.7;
width: 100%;
height: 50vh;
position: relative;
/*This will scale the image in proportion to the 25% width set for meals-showcase-li*/
transform: scale(1.15);
/*This is a part of our "animation" for food images.*/
transition: transform 0.5s, opacity 0.5s;
/*animation - changing from this css setting to another will take some time*/
}
.meal-photo img:hover {
opacity: 1;
transform: scale(1.03);
/*Not 1 because we want to cover some whitespace below each image.*/
}
.text {
text-align: center;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kemanaa</title>
</head>
<body>
<div class="container">
<ul class="feature-showcase">
<li>
<figure class="meal-photo">
<img src="source/image/oleh-oleh1.jpg" alt="">
<!-- <p class="text">Oleh oleh</p> -->
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="source/image/kuliner1.jpg" alt="">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="source/image/wisata1.jpg" alt="">
</figure>
</li>
</ul>
<ul class="feature-showcase">
<li>
<figure class="meal-photo">
<img src="source/image/oleh-oleh2.jpg" alt="">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="source/image/kuliner2.jpg" alt=>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="source/image/wisata2.jpg" alt=" ">
</figure>
</li>
</ul>
</div>
</body>
</html>
if you guys have another advice or better code, it will be great.
this text is just for It looks like your post is mostly code; please add some more details.
I would suggest using the images as background for the elements instead of setting an img tag.
Check the guide here: https://www.w3schools.com/cssref/pr_background-image.asp
Instead of using
.feature-showcase li {
display: block;
float: left;
width: 33.3%;
/*3 li should occupy full width.*/
}
Try using flexbox
I suggest using this as example
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This could be one way to do it. My example is very simple so maybe you could use it as a starting point.
Here is a Codepen.
I presumed you wanted to use actual image elements.
HTML
<div class="container">
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
</div>
CSS
.container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
width: 33.3333%;
height: 50%;
position: relative;
}
.item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.text p {
color: white;
}
you can use display:Grid
basic example:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.container {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.container figure {
position:relative
}
.container figure img {
height: 100%;
width: 100%;
}
.container figure figcaption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
font-size: 2em;
}
<div class="container">
<figure >
<img src="https://picsum.photos/id/251/500/300.jpg" alt="">
<figcaption>Oleh-oleh</figcaption>
</figure>
<figure >
<img src="https://picsum.photos/id/252/500/300.jpg" alt="">
<figcaption></figcaption>
</figure>
<figure >
<img src="https://picsum.photos/id/253/500/300.jpg" alt="">
<figcaption>Wisata</figcaption>
</figure>
<figure >
<img src="https://picsum.photos/id/254/500/300.jpg" alt="">
<figcaption></figcaption>
</figure>
<figure >
<img src="https://picsum.photos/id/255/500/300.jpg" alt="">
<figcaption>Kuliner</figcaption>
</figure>
<figure >
<img src="https://picsum.photos/id/256/500/300.jpg" alt="">
<figcaption></figcaption>
</figure>
</div>
I'm trying to figure out why my right sidebar only goes half-way up the screen and what I'm doing wrong.
I have the HTML and CSS at the bottom and a picture of the website at the bottom. I'm trying to get the text in the middle but when I do that the text blocks the right sidebar from going all the way up. I have a picture of what it's supposed to look like at the bottom also. I could really use some help with this.
/* right sidebar */
#right_sidenav {
width: 180px;
float: right;
background-color: #F5DEB3
padding: 0;
}
/* the styles for the section */
html {
background-image:url(../images/bats.gif);
background-repeat: repeat;
}
body {
font-family: Arial, Helvetica, sans-serif;
width: 800px;
background-color: white;
border: 5px solid black;
box-shadow: 5px 5px 5px 5px black;
margin: 0 auto;
}
section {
width: 600px;
float: right;
padding-right: 20px;
padding-left: 20px;
padding-bottom; 20px;
}
main {
clear: both;
}
aside {
width: 160px;
float: left;
}
section h2 {
margin-left: 0;
}
section figcaption {
float: right;
clear: right;
margin-left: 10em;
padding-right: 15em;
}
section img {
float: left;
margin: 0;
padding: 0;
}
<section>
<h2>20" Deranged Cat</h2>
<figure>
<picture>
<img src="images/cat1.jpg" alt="cat">
</picture>
<figcaption>This cat provides its own light and is perfect for a
backyard haunting.
Price 19.99</figcaption>
</figure>
</section>
<div id="right_sidenav">
<h5>Customers who bought this product also bought:</h5>
<ul>
<li>
<figure>
<picture>
<img src="images/flying_bats.jpg" alt="flying bat">
</picture>
<figcaption>
Flying bats
</figcaption>
</figure>
</li>
<li>
<figure>
<picture>
<img src="images/rat1.jpg" alt="rat">
</picture>
<figcaption>
16" Ugly rat
</figcaption>
</figure>
</li>
<li>
<figure>
<picture>
<img src="images/strobe1.jpg" alt="strobe light">
</picture>
<figcaption>
Mini strobe light
</figcaption>
</figure>
</li>
</ul>
</div>
'#' usually stops a sidebar when you go to it. Only classes will work with this.
You also need to define everything. Style is not defined. No content is the <style> tags are defined either.
When you have a tag in html and want to define it with CSS then you do not put a '.' in front of the class as it is a tag not a class
<section>
<h2>20" Deranged Cat</h2>
<figure>
<picture>
<img src="images/cat1.jpg" alt="cat">
</picture>
<figcaption>This cat provides its own light and is perfect for a
backyard haunting.
Price 19.99</figcaption>
</figure>
</section>
<div id="right_sidenav">
<h5>Customers who bought this product also bought:</h5>
<ul>
<li>
<figure>
<picture>
<img src="flying_bats.jpg" alt="flying bat">
</picture>
<figcaption>
Flying bats
</figcaption>
</figure>
</li>
<li>
<figure>
<picture>
<img src="images/rat1.jpg" alt="rat">
</picture>
<figcaption>
16" Ugly rat
</figcaption>
</figure>
</li>
<li>
<figure>
<picture>
<img src="images/strobe1.jpg" alt="strobe light">
</picture>
<figcaption>
Mini strobe light
</figcaption>
</figure>
</li>
</ul>
</div>
/* right sidebar */
#right_sidenav {
width: 180px;
float: right;
background-color: #F5DEB3
padding: 0;
/* the styles for the section */
html {
background-image:url(../images/bats.gif);
background-repeat: repeat;
}
li {
list-style: none;
}
body {
font-family: Arial, Helvetica, sans-serif;
width: 800px;
background-color: white;
border: 5px solid black;
box-shadow: 5px 5px 5px 5px black;
margin: 0 auto;
}
section {
width: 600px;
float: right;
padding-right: 20px;
padding-left: 20px;
padding-bottom; 20px;
}
.main {
clear: both;
}
.aside {
width: 160px;
float: left;
}
.section h2 {
margin-left: 0;
}
.section figcaption {
float: right;
clear: right;
margin-left: 10em;
padding-right: 15em;
}
.section img {
float: left;
margin: 0;
padding: 0;
}
There is a white space before the image in the second row. I don’t know why this is happening.
Margin and padding are fine.
All images are of the same size, but there is white space on the second row before the image. 2 more images can fit in there.
Upon inspecting it's just showing white space from the body.
No excess margin or padding is there from any of the images.
Used – "float: left;"
The images on the third row and further are fine.
Can someone figure out the issue, why is this happening?
Click to see image
HTML File:
<!DOCTYPE html>
<html>
<head>
<title>Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="gallery.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,800&display=swap" rel="stylesheet">
</head>
<body>
<p>Photo Gallery</p>
<img src="a (1).jpg">
<img src="a (2).jpg">
<img src="a (3).jpg">
<img src="a (4).jpg">
<img src="a (5).jpg">
<img src="a (6).jpg">
<img src="a (7).jpg">
<img src="a (8).jpg">
<img src="a (9).jpg">
</body>
</html>
CSS File:
img{
width: 30%;
float: left;
margin: 1.66%;
padding: 0;
}
p{
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width:30%;
padding-bottom: 30px;
}
This is happening because the images are of different height. The best solution with display block layout will be using a width to the image and setting the display: inline-block
img{
width: 30%;
/* margin: 1.66%; */
padding: 0;
display: inline-block;
vertical-align: middle;
}
p{
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width:30%;
padding-bottom: 30px;
}
<p>Photo Gallery</p>
<div class="image-container">
<img src="https://www.w3schools.com/html/img_girl.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
</div
Or else you can go for flex display. This will ensure that the child elemets are of same height, without explicitly mentioning the height.
.image-item {
display: flex;
flex-direction: column;
width: 30%;
margin: 1.66%;
padding: 0;
justify-content: center;
}
img{
width: 100%;
}
.image-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
p {
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width: 30%;
padding-bottom: 30px;
}
<p>Photo Gallery</p>
<div class="image-container">
<div class="image-item">
<img src="https://www.w3schools.com/html/img_girl.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
</div>
It's the margin property.
img{
width: 30%;
float: left;
margin: 0 1.66%;
padding: 0;
}
p{
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width:30%;
padding-bottom: 30px;
}
<p>Photo Gallery</p>
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
the work waiting to be done
I want them to be fixed on size; like a table without shared borders.
Here s my html and css codes:
.leftsubstancelist {
padding-top: 40px;
border-top: 2px solid #003333;
width: 39%;
float: left;
}
.rightsubstancelist {
padding-top: 40px;
border-top: 2px solid #003333;
width: 39%;
float: right;
}
.leftsubstancelist figure {
border: 3px solid #003333;
}
.rightsubstancelist figure {
border: 3px solid #003333;
}
figure img {
max-width: 80%
}
<section class="leftsubstancelist">
<figure>
<img src="img/active_substance/vankomisin.png" alt="Vankomisin Hidroklorür" align="center">
<figcaption>Vankomisin Hidroklorür</figcaption>
</figure>
<br>
<figure>
<img src="img/active_substance/imipenem_silastatin.png" alt="İmipenem / Silastatin" align="center">
<figcaption>İmipenem / Silastatin</figcaption>
</figure>
</section>
<section class="rightsubstancelist">
<figure>
<img src="img/active_substance/ertapenem.png" alt="Ertapenem" align="center">
<figcaption>Ertapenem</figcaption>
</figure>
<br>
<figure>
<img src="img/active_substance/teikoplanin.png" alt="Teikoplanin" align="center">
<figcaption>Teikoplanin</figcaption>
</figure>
</section>
I ve tried, display:box, align:center and some other related stuff but couldn't manage to tidy them up.
Thanks for your help!
Use flexbox.
When you want all rows to be of a continuous height, you could leave out align-items or set it to stretch. Otherwise you could use align-items: flex-start when you want them to have an individual height but rendered at top.
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
section {
display: flex;
justify-content: space-between;
/* Uncomment the following line, if the
rows cell can have different heights */
/* align-items: flex-start; */
flex-wrap: wrap;
border-top: 2px solid #003333;
padding: 20px;
}
figure {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 3px solid #003333;
width: calc( 50% - 40px );
margin: 20px;
}
figure img {
width: 100%;
height: auto;
}
<section>
<figure>
<img src="http://via.placeholder.com/320x140" />
<figcaption>Vankomisin Hidroklorür</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/320x160" />
<figcaption>İmipenem / Silastatin</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/320x180" />
<figcaption>Ertapenem</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/320x120" />
<figcaption>Teikoplanin</figcaption>
</figure>
</section>
Try below:
<style>
.divSquare1{
width:45%; height:200px; margin:4px; border:1px solid black; float: left
}
.divSquare2{
width:45%; height:200px; margin:4px; border:1px solid black; float: right
}
.space{
width:5%;
}
</style>
<div class="divSquare1">
<figure>
<img src="img/active_substance/vankomisin.png" alt="Vankomisin Hidroklorür" align="center">
<figcaption>Vankomisin Hidroklorür</figcaption>
</figure>
</div>
<div class="divSquare2">
<figure>
<img src="img/active_substance/imipenem_silastatin.png" alt="İmipenem / Silastatin" align="center">
<figcaption>İmipenem / Silastatin</figcaption>
</figure>
</div>
<div style='clear:both' class="space"></div>
<div class="divSquare1">
<figure>
<img src="img/active_substance/ertapenem.png" alt="Ertapenem" align="center">
<figcaption>Ertapenem</figcaption>
</figure>
</div>
<div class="divSquare2">
<figure>
<img src="img/active_substance/teikoplanin.png" alt="Teikoplanin" align="center">
<figcaption>Teikoplanin</figcaption>
</figure>
</div>
Set a static height for your figure element. This will make them all have the same height and spacing. I believe this will solve your issue but your question was vague.
figure {
height: 150px;
}
I'm styling a site and I have a row of images in figure tags. I've had to make a couple of adjustments and now I can't get them aligned properly. This is how they should look -
And this is how they currently look -
I need all the images aligned as per the first image. Can't quite figure out how to do it as they're wrapped in a tags. Here's the code -
section#products {
height: 600px;
max-width: 100%
}
.agencyproducts {
width: 100%;
text-align: center;
}
.agencyproducts a {
display: inline-block;
}
.agencyproducts p {
text-align: center;
margin: 30px;
}
.agencyproducts img {
width: 80px;
height: 80px;
}
figure {
text-align: center;
max-width: 100px;
height: 100px;
vertical-align: top;
margin: 10px;
font-size: 9px;
}
figure img {}
#products figcaption {
padding-top: 10px;
display: inline-block;
}
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
<a href="http://localhost:8888/agency/2k4k-production/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/production.png" alt="Production">
<figcaption>2K / 4K PRODUCTION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/post-production/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/post-production.png" alt="Post-Production">
<figcaption>POST PRODUCTION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/2d3d-animation/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/animation.png" alt="Animation">
<figcaption>2D / 3D ANIMATION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/adhoc/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/ADHOC.png" alt="ADHOC">
<figcaption>ADHOC</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/interactive/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/interactive.png" alt="Interactive">
<figcaption>INTERACTIVE & PERSONALISED</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/tv-adverts/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/tv-adverts.png" alt="TV ADVERTS">
<figcaption>TV ADVERTS</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/360-video/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/360.png" alt="360 Video and VR">
<figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
</figure>
</a>
</div>
</div>
I made a flexbox of .agencyproducts with alignment in the center.
section#products {
height: 600px;
max-width: 100%
}
.agencyproducts {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.agencyproducts a {
display: inline-block;
}
.agencyproducts p {
text-align: center;
margin: 30px;
width: 100%;
}
.agencyproducts img {
width: 80px;
height: 80px;
}
figure {
text-align: center;
max-width: 100px;
height: 100px;
vertical-align: top;
margin: 10px;
font-size: 9px;
}
figure img {}
#products figcaption {
padding-top: 10px;
display: inline-block;
}
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
<a href="http://localhost:8888/agency/2k4k-production/">
<figure>
<img src="http://placehold.it/100/ff0000" alt="Production">
<figcaption>2K / 4K PRODUCTION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/post-production/">
<figure>
<img src="http://placehold.it/100/ff0000" alt="Post-Production">
<figcaption>POST PRODUCTION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/2d3d-animation/">
<figure>
<img src="http://placehold.it/100/ff0000" alt="Animation">
<figcaption>2D / 3D ANIMATION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/adhoc/">
<figure>
<img src="http://placehold.it/100/ff0000" alt="ADHOC">
<figcaption>ADHOC</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/interactive/">
<figure>
<img src="http://placehold.it/100/ff0000" alt="Interactive">
<figcaption>INTERACTIVE & PERSONALISED</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/tv-adverts/">
<figure>
<img src="http://placehold.it/100/ff0000" alt="TV ADVERTS">
<figcaption>TV ADVERTS</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/360-video/">
<figure>
<img src="http://placehold.it/100/ff0000" alt="360 Video and VR">
<figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
</figure>
</a>
</div>
</div>
</div>
</section>
section#products {
height: 600px;
max-width: 100%
}
.agencyproducts {
width: 100%;
text-align: center;
vertical-align: top;
}
.agencyproducts a {
display: inline-block;
vertical-align: top;
}
.agencyproducts p {
text-align: center;
margin: 30px;
}
.agencyproducts img {
width: 80px;
height: 80px;
}
figure {
text-align: center;
max-width: 100px;
height: 120px;
vertical-align: top;
margin: 10px;
font-size: 9px;
}
figure img {}
#products figcaption {
padding-top: 10px;
display: inline-block;
}
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
<a href="http://localhost:8888/agency/2k4k-production/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/production.png" alt="Production">
<figcaption>2K / 4K PRODUCTION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/post-production/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/post-production.png" alt="Post-Production">
<figcaption>POST PRODUCTION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/2d3d-animation/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/animation.png" alt="Animation">
<figcaption>2D / 3D ANIMATION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/adhoc/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/ADHOC.png" alt="ADHOC">
<figcaption>ADHOC</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/interactive/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/interactive.png" alt="Interactive">
<figcaption>INTERACTIVE & PERSONALISED</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/tv-adverts/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/tv-adverts.png" alt="TV ADVERTS">
<figcaption>TV ADVERTS</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/360-video/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/360.png" alt="360 Video and VR">
<figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
</figure>
</a>
</div>
</div>
I have increased the height of the faigures, from 100 to 120 to be able to fit the second line of text. Then I added vertical-align:top so they would align.