hi
For some reason my figcations are hidden in the Grid Container… Why…
How to un hide the caption. Below the picture
Link to the code
Thee Link
CSS part
:root {
--text-color: #404040;
--header-bg: #d6f5f5;
}
body {
box-sizing: border-box;
color: var(--text-color);
margin: 0;
}
header {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: var(--header-bg);
height: 250px;
border: solid;
width: 100%;
}
header h1 {
font-size: 3rem;
margin: 0;
}
header p {
font-size: 1.5rem;
margin: 0;
}
.all_projects {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr 1fr;
grid-template-areas:
"header header header"
"g_project_1 g_project_2 g_project_3"
"g_project_4 g_project_4 g_project_3";
gap: 20px 20px;
border: solid pink;
background-color: #fff3e6;
}
.project-title {
grid-area: header;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
font-size: 2rem;
line-height: 1.1;
border: solid;
background-color: #ccccff;
}
span.project-title-newline {
display: block;
border: solid;
background-color: #c2c2a3;
}
span.sizeof-i {
font-size: 3rem;
}
img {
transition-property: transform;
transition-duration: 0.7s;
transition-timing-function: ease-out;
width: 100%;
height: 100%;
/*object-fit: cover;*/
}
figcaption {
position: relative;
border: solid;
font-size: 2em;
margin: 10px;
}
.project_1 figcaption {
top: 50%;
left: 50%;
}
.project_1 {
grid-area: g_project_1;
width: 320px;
height: 310px;
margin: 0;
overflow: hidden;
border: solid;
background-color: #ffecb3;
}
.project_2 {
grid-area: g_project_2;
border: solid;
background-color: #ffecb3;
width: 320px;
height: 310px;
overflow: hidden;
margin: 0;
}
.project_3 {
grid-area: g_project_3;
border: solid;
background-color: #ffecb3;
width: 405px;
height: 645px;
overflow: hidden;
margin: 0;
}
.project_4 {
grid-area: g_project_4;
border: solid;
background-color: #ffecb3;
width: 665px;
height: 310px;
overflow: hidden;
margin: 0;
}
img:hover {
transform: scale(1.09);
}
/*992px and 600px*/
@media (max-width: 600px) {
.all_projects {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas:
"header"
"g_project_1"
"g_project_2"
"g_project_3"
"g_project_4";
grid-auto-flow: column;
gap: 20px 20px;
border: solid pink;
background-color: red;
}
.project_1, .project_2, .project_3, .project_4 {
width: 320px;
height: 310px;
margin-left: auto;
margin-right: auto;
}
Html Part
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<header id="welcome-section">
<h1>I am Alexander</h1>
<p>A Baby Web Developer</p>
</header>
<section id="projects" class= "all_projects">
<h2 class="project-title project-tile">
Bask On The Projects <span class="project-title-newline">That <span class="sizeof-i">I</span> Brought Life To</span>
</h2>
<figure class="project_1">
<a href="https://codepen.io/Alexanderthe3rd/full/BaorBNp" target="_blank"> <img src="https://res.cloudinary.com/alexanderthe3rd/image/upload/v1594140260/Portfolio%20Project/Tribute_Page_Screenshot_w1915xh999.jpg" alt="Screenshot Of The Tribute Page Project" ></a>
<!-- half size of the origianl width="478.75" height="249.75" -->
<figcaption>Tribute Page</figcaption>
</figure>
<figure class="project_2">
<a href="https://codepen.io/Alexanderthe3rd/full/BaorBNp" target="_blank"> <img src="https://res.cloudinary.com/alexanderthe3rd/image/upload/v1594140260/Portfolio%20Project/Tribute_Page_Screenshot_w1915xh999.jpg" alt="Screenshot Of The Tribute Page Project" ></a>
<figcaption>Caption project 2</figcaption>
</figure>
<figure class="project_3">
<a href="https://codepen.io/Alexanderthe3rd/full/BaorBNp" target="_blank"> <img src="https://res.cloudinary.com/alexanderthe3rd/image/upload/v1594140260/Portfolio%20Project/Tribute_Page_Screenshot_w1915xh999.jpg" alt="Screenshot Of The Tribute Page Project" ></a>
<figcaption>Caption Project 3</figcaption>
</figure>
<figure class="project_4">
<a href="https://codepen.io/Alexanderthe3rd/full/BaorBNp" target="_blank"> <img src="https://res.cloudinary.com/alexanderthe3rd/image/upload/v1594140260/Portfolio%20Project/Tribute_Page_Screenshot_w1915xh999.jpg" alt="Screenshot Of The Tribute Page Project" ></a>
<figcaption>Caption Project 4</figcaption>
</figure>
</section>