I am starting as a developper front-end and learning to code in HTML and CSS.
I am struggling with the last section of my code, there is a big empty space, I am trying to find a solution but never could, if someone can help me, that would be perfect !
Also I would like to know what I did wrong, it'll help me to learn even more :)
Here the empty spot
Thanks in advance !!
.activites {
width: 100%;
display: flex;
}
.colonnesimple {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
}
.colonnedouble {
width: 25%;
display: flex;
flex-direction: column;
}
.colonnesimple img {
object-fit: cover;
height: 90%;
width: 100%;
border-radius: 16px 16px 0 0;
}
.colonnedouble img {
object-fit: cover;
height: 80%;
width: 100%;
border-radius: 16px 16px 0 0;
}
.activites .colonnesimple figure {
width: calc(100% / 1.2);
height: 59%;
margin-left: 25px;
margin-right: 40px;
box-shadow: 0px 0px 10px #55555538;
border-radius: 16px 16px 16px 16px;
cursor: pointer;
}
.activites .colonnedouble figure {
width: calc(100% / 1.2);
height: 28%;
margin-left: 30px;
margin-right: 40px;
box-shadow: 0px 0px 10px #55555538;
border-radius: 16px 16px 16px 16px;
cursor: pointer;
}
.activites .colonnesimple figure figcaption {
padding: 10px;
position: relative;
}
.activites .colonnedouble figure figcaption {
padding: 10px;
position: relative;
}
<section id="activitesmarseille">
<div class="contenuactivites">
<h5>Activités à Marseille</h5>
<div class="activites">
<div class="colonnesimple">
<figure>
<a href="#">
<img class="imagesolo" src="images/activites/3_medium/reno-laithienne-QUgJhdY5Fyk-unsplash.jpg" alt="Image du Vieux Port">
<figcaption>
<h6>Vieux Port</h6>
</figcaption>
</a>
</figure>
</div>
<div class="colonnedouble">
<figure>
<a href="#">
<img class="imagedoublegrd" src="images/activites/3_medium/paul-hermann-QFTrLdQIRhI-unsplash.jpg" alt="Image du Fort de Pomègues">
<figcaption>
<h6>Fort de Pomègues</h6>
</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img class="imagedoublept" src="images/activites/3_medium/kevin-hikari-rV_Qd1l-VXg-unsplash.jpg" alt="Image des îles du Frioul">
<figcaption>
<h6>îles du Frioul</h6>
</figcaption>
</a>
</figure>
</div>
<div class="colonnesimple">
<figure>
<a href="#">
<img class="imagesolo" src="images/activites/3_medium/kilyan-sockalingum-NR8-cBCN3aI-unsplash.jpg" alt="Image du Parc National des Calanques">
<figcaption>
<h6>Parc National des Calanques</h6>
</figcaption>
</a>
</figure>
</div>
<div class="colonnedouble">
<figure>
<a href="#">
<img class="imagedoublept" src="images/activites/3_medium/florian-wehde-xW9e8gdotxI-unsplash.jpg" alt="Image de Notre-Dame-de-la-Garde">
<figcaption>
<h6>Notre-Dame-de-la-Garde</h6>
</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img class="imagedoublegrd" src="images/activites/3_medium/lena-paulin-wH2-EJoDcV0-unsplash.jpg" alt="Image du Parc LongChamp">
<figcaption>
<h6>Parc LongChamp</h6>
</figcaption>
</a>
</figure>
</div>
</div>
</div>
</section>
So problem was with height: 59%; which u provide at %, because that u have empty space on the end of the page, solution:
.activites {
width: 100%;
display: flex;
}
.colonnesimple {
width: 25%;
}
.colonnedouble {
width: 25%;
flex-direction: column;
}
.colonnesimple img {
object-fit: cover;
height: 90%;
width: 100%;
border-radius: 16px 16px 0 0;
}
.colonnedouble img {
object-fit: cover;
height: 80%;
width: 100%;
border-radius: 16px 16px 0 0;
}
.activites .colonnesimple figure {
width: calc(100% / 1.2);
height: 257px;
margin-left: 25px;
margin-right: 40px;
box-shadow: 0px 0px 10px #55555538;
border-radius: 16px 16px 16px 16px;
cursor: pointer;
}
.activites .colonnedouble figure {
width: calc(100% / 1.2);
height: 120px;
margin-left: 30px;
margin-right: 40px;
box-shadow: 0px 0px 10px #55555538;
border-radius: 16px 16px 16px 16px;
cursor: pointer;
}
.activites .colonnesimple figure figcaption {
padding: 10px;
position: relative;
}
.activites .colonnedouble figure figcaption {
padding: 10px;
position: relative;
}
<section id="activitesmarseille">
<div class="contenuactivites">
<h5>Activités à Marseille</h5>
<div class="activites">
<div class="colonnesimple">
<figure><a href="#">
<img class="imagesolo" src="https://www.imgacademy.com/sites/default/files/2009-stadium-about.jpg" alt="Image du Vieux Port">
<figcaption>
<h6>Vieux Port</h6>
</figcaption>
</a>
</figure>
</div>
<div class="colonnedouble">
<figure><a href="#">
<img class="imagedoublegrd" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSe6kwbxkuKpLxeNP_O6LGoJxIkuhatjNvZ0gPcRr4DpziONgkIsqNOl09dfZduQJHH_6k&usqp=CAU" alt="Image du Fort de Pomègues">
<figcaption>
<h6>Fort de Pomègues</h6>
</figcaption>
</a>
</figure>
<figure><a href="#">
<img class="imagedoublept" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRnsZZ1ZwCEhb4spOX3eIMeN3KbwZaAJo6mypioWrvsaNPfb5TFNu8kjrtEvrADqvoRdA&usqp=CAU" alt="Image des îles du Frioul">
<figcaption>
<h6>îles du Frioul</h6>
</figcaption>
</a>
</figure>
</div>
<div class="colonnesimple">
<figure><a href="#">
<img class="imagesolo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2qwQpNH5dPV0dLoPl7InPlMPUf0eWWMG4POrt56FeF62yCUZA-qVBMKb3UDi6I2lj30k&usqp=CAU" alt="Image du Parc National des Calanques">
<figcaption>
<h6>Parc National des Calanques</h6>
</figcaption>
</a>
</figure>
</div>
<div class="colonnedouble">
<figure><a href="#">
<img class="imagedoublept" src="https://www.imgacademy.com/sites/default/files/styles/scale_2500w/public/2017-03/Campus%20Center.jpg?itok=Bs2r8s-1" alt="Image de Notre-Dame-de-la-Garde">
<figcaption>
<h6>Notre-Dame-de-la-Garde</h6>
</figcaption>
</a>
</figure>
<figure><a href="#">
<img class="imagedoublegrd" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTGOfJEHAIvVjPI8TXLLrMgwXWZiPx0FkU3dBiBExfIDy-ISANxSh2ulIvA9f86y_yu-sU&usqp=CAU" alt="Image du Parc LongChamp">
<figcaption>
<h6>Parc LongChamp</h6>
</figcaption>
</a>
</figure>
</div>
</div>
</div>
</section>
If you encounter more problems like this I advice to use the inspector (CTRL+SHIFT+C) of your browser
and simply hover over the problem to see where the problem may be. In this case probably a height value that is too high.
Related
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>
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;
}
I have an image gallery and would like to display text above it when hovering. I cannot set specific sizes to the image description because the grid resizes constantly. I know I could fix it with very specific media queries yet I don't want to do that. Is there a simple way for me to do it?
.figure-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
}
.description {
opacity: 0;
background: black;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.img-container {
overflow: hidden;
width: 100%;
height: 100%;
}
figure:hover .description {
opacity: .8;
}
.d-name {
color: white;
font-size: 1.2em;
font-weight: 600;
}
.d-item {
color: white;
font-size: 1.1;
}
<figure class="figure3">
<img class="figure-img" src="images/propg" alt="5St.">
<div class="description text-center">
<p class="d-name">Tower</p>
<p class="d-item">Pnsulation</p>
<p class="d-item">topping</p>
</div>
</figure>
<figure class="figure4">
<img class="figure-img" src="image" alt="nehandler">
<div class="description text-center">
<p class="d-name"> Tower</p>
<p class="d-item">nsulation</p>
<p class="d-item">topping</p>
</div>
</figure>
<figure class="figure5 ">
<div class="img-container">
<img class="figure-img" src="images/pr34th-St%20rendering.jpg" alt="4h St">
<figcaption class="description text-center">
<p class="d-name"> Tower</p>
<p class="d-item">PInsulation</p>
<p class="d-item"> Firestopping</p>
</figcaption>
</div>
</figure>
I cant get these figures to centered. They're inside a section, I've tried so many variations. All is as it should be, they float in the right way. But no matter what I try with the sections or figure codes, they still do not center within the sections.
section {
width: 100%;
padding: 1rem;
display: table;
margin: 0 auto;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: white;
}
figure.snip1165 {
float: left;
margin: 1rem;
overflow: hidden;
min-width: 150px;
max-width: 300px;
background: #000000;
color: #333;
text-align: left;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
<section>
<figure class="snip1165">
<img src="http://test.nationalparkpaws.com/images/camping%20in%20mountains%20with%20ten.jpg" />
<figcaption>
<h3>Useful Tips</h3>
<p>
Sometimes I think the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.
</p>
</figcaption>
</figure>
<figure class="snip1165 red">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample63.jpg" alt="sample63" />
<figcaption>
<h3>Caspian<span> Bellevedere</span></h3>
<p>
I don't need to compromise on my principles, because they don't have the slightest bearing on what happens to me anyway.
</p>
</figcaption>
</figure>
<figure class="snip1165 orange">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample64.jpg" alt="sample64" />
<figcaption>
<h3>Parsley<span> Montana</span></h3>
<p>
That's the problem with nature, something's always stinging you or oozing mucous all over you. Hobbes, I think it is time you and me when and watched some TV.
</p>
</figcaption>
</figure>
</section>
Use text-align: center; on the section and remove float: left; on figure and use display: inline-block; and vertical-align: top; instead.
Should do the trick, see below snippet :
section {
width: 100%;
padding: 1rem;
display: table;
margin: 0 auto;
max-width: none;
background-color: #373B44;
height: 100vh;
text-align: center;
}
section:nth-of-type(2n) {
background-color: white;
}
figure.snip1165 {
display: inline-block;
vertical-align: top;
margin: 1rem;
overflow: hidden;
min-width: 150px;
max-width: 300px;
background: #000000;
color: #333;
text-align: left;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
<section>
<figure class="snip1165">
<img src="http://test.nationalparkpaws.com/images/camping%20in%20mountains%20with%20ten.jpg"/>
<figcaption>
<h3>Useful Tips</h3>
<p>
Sometimes I think the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.
</p>
</figcaption>
</figure>
<figure class="snip1165 red">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample63.jpg" alt="sample63"/>
<figcaption>
<h3>Caspian<span> Bellevedere</span></h3>
<p>
I don't need to compromise on my principles, because they don't have the slightest bearing on what happens to me anyway.
</p>
</figcaption>
</figure>
<figure class="snip1165 orange">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample64.jpg" alt="sample64"/>
<figcaption>
<h3>Parsley<span> Montana</span></h3>
<p>
That's the problem with nature, something's always stinging you or oozing mucous all over you. Hobbes, I think it is time you and me when and watched some TV.
</p>
</figcaption>
</figure>
</section>
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.