Tell us what’s happening:
Hi! I passed all the tests for this project but am not satisfied with how it looks on tiny screens. When I look on my phone the tiles in the Projects section extend into the Contact section and I’m not sure why or the best way to fix this. Thank you so much for any help or suggestions!
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Ethan Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"
</head>
<body>
<section id="navigation">
<nav id="navbar">
<a class="navlink" href="#welcome">Intro</a>
<a class="navlink" href="#projects">Projects</a>
<a class="navlink" href="#contact">Contact</a>
</nav>
</section>
<section id="welcome-section">
<h1 id="intro">Welcome! I'm Ethan</h1>
<h2 id="intro-subtitle">A Programmer</h2>
</section>
<section id="projects">
<h1 id="projects-title">Things I've Made</h1>
<a class="project-tile" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form" target="_blank"><h1 class="tile-title">Survey Form</h1><p>For this project I learned basic HTML and CSS, and learned how to make forms.</p></a>
<a class="project-tile" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page" target="_blank"><h1 class="tile-title">Tribute Page</h1><p>For this project I began learning CSS Flexbox, and developed a deeper knowledge of HTML and CSS basics. There was also a section leading up to this project that covered accessibility.</p></a>
<a class="project-tile" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page" target="_blank"><h1 class="tile-title">Technical Documentation Page</h1> <p>For this project I delved deep into CSS and learned a lot about formatting and page layout.</p></a>
<a class="project-tile" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page" target="_blank"><h1 class="tile-title">Product Landing Page</h1><p>The last project in the Responsive Web Design course on freeCodeCamp, I learned a lot about CSS Grid, deepened my knowledge of CSS Flexbox, and created a responsive and presentable web page.</p></a>
</section>
<section id="contact">
<h1 id="contact-title">Contact Me!</h1>
<a id="profile-link" href="https://www.freecodecamp.org/FinTheProgrammer" target="_blank">freeCodeCamp Profile</a>
<a id="email-link" href="">Email: placeholder@gmail.com</a>
</section>
<footer id="footer">
<h3>Thanks for checking out my portfolio! :)</h3>
</footer>
</body>
</html>
/* file: styles.css */
*,
::before,
::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* Navbar */
#navbar {
display: flex;
position: fixed;
top: 0;
right: 0;
left: 0;
padding: 20px;
height: 50px;
width: 100vw;
background-color: #3d6967;
gap: 10px;
justify-content: right;
align-items: center;
}
.navlink {
text-decoration: none;
color: black;
}
/* Welcome Section */
#welcome-section {
margin-top: 50px;
height: 100vh;
width: 100vw;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
background-color: #85b5c9;
border-bottom: 5px solid #0f3042;
}
#intro {
grid-row: 1 / 1;
grid-column: 1 / span 3;
justify-self: center;
padding-top: 40vh;
}
#intro-subtitle {
grid-row: 2 / 2;
grid-column: 1 / span 3;
justify-self: center;
padding-bottom: 50vh;
}
/* Projects Section */
#projects {
height: 100vh;
width: 100vw;
display: grid;
grid-template-rows: 1fr 2fr 2fr;
grid-template-columns: 1fr 2fr 2fr 1fr;
background-color: #3c90bd;
border-bottom: 5px solid #0f3042;
padding-bottom: 10vh;
wrap: wrap;
}
#projects-title {
grid-row: 1 / 1;
grid-column: 1 / span 4;
align-self: center;
justify-self: center;
}
a {
text-decoration: none;
color: black;
}
a span {
justify-self: center;
align-self: center;
}
/* Project Tiles */
.project-tile {
border: 5px solid #0f3042;
text-align: center;
margin: 10px;
background-color: #e1e2e3;
}
.project-tile:hover {
opacity: 50%;
}
.project-tile:nth-of-type(1) {
grid-row: 2;
grid-column: 2;
}
.project-tile:nth-of-type(2) {
grid-row: 2;
grid-column: 3;
}
.project-tile:nth-of-type(3) {
grid-row: 3;
grid-column: 2;
}
.project-tile:nth-of-type(4) {
grid-row: 3;
grid-column: 3;
}
/* Contact Info */
#contact {
height: 100vh;
width: 100vw;
display: grid;
background-color: #85b5c9;
grid-template-rows: 1fr 2fr;
grid-template-columns: 1fr 1fr;
border-bottom: 5px solid #0f3042;
}
#contact-title {
justify-self: center;
padding-top: 10vh;
grid-row: 1;
grid-column: 1 / span 2;
column-gap: 5vw;
}
#contact a:hover {
opacity: 50%;
}
#contact a:nth-of-type(1) {
display: block;
border: 5px solid #0f3042;
height: 25vh;
grid-column: 1;
grid-row: 2;
margin-left: 5vw;
margin-right: 5vw;
text-align: center;
align-content: center;
justify-content: center;
background-color: #e1e2e3;
}
#contact a:nth-of-type(2) {
display: block;
border: 5px solid #0f3042;
height: 25vh;
grid-column: 2;
grid-row: 2;
margin-left: 5vw;
margin-right: 5vw;
text-align: center;
align-content: center;
justify-content: center;
background-color: #e1e2e3;
}
/* Footer */
footer {
display: flex;
background-color: #3d6967;
padding: 10px;
}
/* @Media */
@media (max-width: 400px) {
h1, h2, h3{
font-size: 1em;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Challenge Information:
Personal Portfolio Webpage - Build a Personal Portfolio Webpage