Hey there
I’m working through this tutorial and im getting the ‘Your portfolio should use at least one media query.’ error despite having a few media queries that are working. I’ve looked at the other posts which are similar but can’t find my answer. Thanks for any help.
Here is my code
<!-----------------HTML BOILERPLATE----------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title id="title">Portfolio Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<!-----------------END HTML BOILERPLATE----------------->
<body>
<!-----------------HEADER SECTION----------------->
<header>
<div id="AT"><a href="#welcome-section">Andrew </a></div>
<!-----------------NAVBAR----------------->
<nav ID="navbar" class="nav">
<ul class="nav-list">
<li><a href="#welcome-section">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-----------------HEADER CLOSE----------------->
<!-----------------ABOUT / WELCOME SECTION----------------->
<section id="welcome-section" class="welcome-section">
<h1 class="glitch">Hey, I'm Andrew</h1>
<p>I'm an architect (buildings) beginning a new journey into tech.</p>
<p>I begin studying an MSc in Computer Science with Software Engineering in June 2024.</p>
</section>
<!-----------------END WELCOME SECTION----------------->
<!-----------------PROJECTS SECTION----------------->
<section id="projects" class="projects-section">
<h2 id="projects-header">Here are some architecture projects...</h2>
<p>until i have more coding projects to show!</p>
<!-----------------PROJECT GRID DIV CONTAINER----------------->
<div class="projects-grid">
<!-----------------FIRST PROJECT----------------->
<a href="https://www.taylorwilsonarchitects.co.uk/architecture/thecoachhouse" class="project-tile" target="_blank">
<img class="project-image" src="https://images.squarespace-cdn.com/content/v1/65bcd1fe70617b3e3e612142/2dbc2ac7-751f-4e63-b387-97524250d7d2/The+Coach+House+Falkirk+Zinc+Gable+Frameless+Glass+Taylor+%2F+Wilson+Architects?format=2500w" target="_blank" width="300px" ></img>
<p class="project-title"><span class="code">The Coach House</span></p>
</a>
<!-----------------SECOND PROJECT----------------->
<a href="https://www.taylorwilsonarchitects.co.uk/architecture/arnothill" class="project-tile" target="_blank">
<img class="project-image" src="https://images.squarespace-cdn.com/content/v1/65bcd1fe70617b3e3e612142/189d070c-8a67-4b4e-920d-f64b049e1b46/Taylor+%2F+Wilson+architect+falkirk+arnothill+award+winning+home?format=2500w" target="_blank" width="300px" ></img>
<p class="project-title"><span class="code">Arnothill</span></p>
</a>
<!-----------------THIRD PROJECT----------------->
<a href="https://www.taylorwilsonarchitects.co.uk/architecture/abercrombyplace" class="project-tile" target="_blank">
<img class="project-image" src="https://images.squarespace-cdn.com/content/v1/65bcd1fe70617b3e3e612142/0d17287e-5fc1-4d5c-99d4-1ea7429ae115/Zinc%2Band%2Bglass%2Barchitect%2Bdesigned%2Bextension%2Bto%2Blisted%2Bdwelling%2Bin%2BKings%2BPark%2BConservation%2BArea%2C%2BStirling.jpeg?format=2500w" target="_blank" width="300px"></img>
<p class="project-title"><span class="code">Abercromby Place</span></p>
</a>
<!-----------------FOURTH PROJECT----------------->
<a href="https://www.taylorwilsonarchitects.co.uk/architecture/boghallhouse" class="project-tile" target="_blank">
<img class="project-image" src="https://images.squarespace-cdn.com/content/v1/65bcd1fe70617b3e3e612142/1d02c5cc-0313-4799-a78a-19627b3797ec/Boghall+House+Linlithgow+Taylor+%2F+Wilson+Architects+Falkirk+Old+and+New+Buildings?format=2500w" target="_blank" width="300px"></img>
<p class="project-title"><span class="code">Boghall House<span></p>
</a>
<!-----------------FIFTH PROJECT----------------->
<a href="https://www.taylorwilsonarchitects.co.uk/architecture/clarendon-road" class="project-tile" target="_blank">
<img class="project-image" src="https://images.squarespace-cdn.com/content/v1/65bcd1fe70617b3e3e612142/a01958ed-6455-4d1c-8c95-e43b4b177f16/Architect%2Bdesigned%2Bextension%2Bto%2Bhouse%2BClarendon%2BRoad%2BLinlithgow%2BWest%2BLothian%2BZinc%2BTimber%2BGlass%2BExtension.jpeg?format=2500w" target="_blank" width="300px"></img>
<p class="project-title"><span class="code">Clarendon Road</span></p>
</a>
<!-----------------SIXTH PROJECT----------------->
<a href="https://www.taylorwilsonarchitects.co.uk/architecture/pilgrimshill" class="project-tile" target="_blank">
<img class="project-image" src="https://images.squarespace-cdn.com/content/v1/65bcd1fe70617b3e3e612142/e72f9799-692a-4f1d-beb4-50f7656933b6/Extension%2BZinc%2BGlass%2Brender%2BPilgrims%2BHill%2BLinlithgow%2BWest%2BLothian%2BDesigned%2Bby%2B_thatstudio%2Barchitects.jpeg?format=2500w" target="_blank" width="300px"></img>
<p class="project-title"><span class="code">Pilgrims Hill</span></p>
</a>
<!-----------------CLOSE PROJECT GRID DIV CONTAINER----------------->
</div>
<!-----------------CLOSE PROJECTS SECTION----------------->
</section>
<!-----------------CONTACT SECTION----------------->
<section ID="contact" class="contact-section">
<div class="contact-header">
<h2>Lets get acquainted...</h2>
<p>How do you like your coffee?</p>
</div>
<div class="contact-links">
<a
href="https://facebook.com/freecodecamp"
target="_blank"
class="btn contact-details"><i class="fab fa-facebook-square"></i> Facebook</a>
<a
id="profile-link"
href="https://github.com/freecodecamp"
target="_blank"
class="btn contact-details">
<i class="fab fa-github"></i> GitHub</a>
<a href="https://twitter.com/freecodecamp"
target="_blank"
class="btn contact-details">
<i class="fab fa-twitter"></i> Twitter</a>
<a href="/cdn-cgi/l/email-protection#492c31282439252c092c31282439252c672a2624"
class="btn contact-details">
<i class="fas fa-at"></i> Send a mail</a>
<a href="tel:123-456-789"
class="btn contact-details">
<i class="fas fa-mobile-alt"></i> Call me</a>
</div>
</section>
<!----------------- END CONTACT SECTION----------------->
<!-----------------FOOTER SECTION----------------->
<footer>
<p>This is my first attempt at a portfolio page coded in HTML and styled with CSS. It is sure to evolve!</p>
<p>Created with assistance from <a href="https://www.freecodecamp.org">©freeCodeCamp</a></p>
</footer>
<!-----------------END FOOTER SECTION----------------->
</body>
</html>
and the CSS
/* Custom properties/variables */
:root {
--main-white: rgb(255,255,255);
--main-purplelight: rgb(121,106,159);
--main-purple: rgb(62,55,131);
--main-purpledark: rgb(38,29,56);
--main-pink: rgb(255,16,240);
/***Global CSS Rules***/
*{
font-family: helvetica, sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
/***List Formatting***/
li {
list-style: none;
}
/***Link / Anchor Formatting***/
a {
text-decoration: none;
color: var(--main-white);
}
/* 1000px / 16px = 62.5em */
@media (max-width: 62.5em) {
* {
font-size: 95%;
}
}
/* 600px / 16px = 37.5em */
@media (max-width: 28.75em) {
* {
font-size: 80%;
}
}
/***END Global CSS Rules***/
/***Header***/
header{
position: fixed;
display: flex;
top: 0;
height: 5rem;
width: 100%;
align-items: center;
background-color: var(--main-purplelight);
font-size: 1.3rem;
font-weight: 300;
border-bottom: 1px solid var(--main-purple);
}
#AT{
margin: 1.6rem;
color: var(--main-white)
}
/***Nav Container***/
.nav{
position: fixed;
top: 0;
display: flex;
justify-content: flex-end;
width: 100%;
height: 5rem;
align-items: center;
}
/***Nav UL Selector***/
.nav > ul {
width: 25vw;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: right;
padding: 0.9rem;
}
/***Welcome Section Container***/
.welcome-section{
width: 100%;
height: 100vh;
background-image: linear-gradient(45deg, var(--main-purplelight) 10%, var(--main-purple) 70%, var(--main-purpledark) 95%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/***Welcome Section H1***/
.welcome-section > h1 {
color: var(--main-pink);
font-size: 5em;
max-width: 62.5rem;
}
/***Welcome Section P***/
.welcome-section > p {
color: var(--main-white);
font-size: 1.3em;
font-style: regular;
padding-top: 0.9rem;
font-weight: 300;
max-width: 62.5rem;
}
/***Projects Section Container***/
.projects-section{
width: 100%;
height: 100vh;
background-color: var(--main-purpledark);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
text-wrap: wrap;
}
/***Projects Section Heading***/
.projects-section > h2{
color: var(--main-purplelight);
font-size: 3em;
margin-bottom: 0.9rem;
margin-top: 3rem;
font-weight: 400;
max-width: 62.5rem;
}
/***Projects Section Sub-Heading***/
.projects-section > p{
color: var(--main-white);
font-size: 1.3em;
margin-bottom: 3rem;
font-weight: 200;
max-width: 62.5rem;
}
/***Projects Tile***/
.project-tile {
color: var(--main-white);
font-size: 1.3em;
font-style: regular;
padding-top: 0.9rem;
font-weight: 300;
}
/***Projects Grid***/
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 2rem;
width: 100%;
max-width: 62.5rem;
margin: 0 auto;
margin-bottom: 6rem;
}
/***Contact Section Container***/
.contact-section{
width: 100%;
height: 100vh;
background-color: var(--main-purplelight);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
/***Contact Section Heading***/
.contact-header > h2{
color: var(--main-purpledark);
font-size: 4em;
margin-bottom: 1.3rem;
max-width: 62.5rem;
}
/***Contact Section Sub-Heading***/
.contact-header > p{
color: var(--main-white);
font-size: 1.3em;
font-style: regular;
padding-top: 0.9rem;
font-weight: 300;
max-width: 62.5rem;
}
/***Contact Links Div Container***/
.contact-links {
display: flex;
justify-content: center;
width: 100%;
max-width: 62.5rem;
margin-top: 4rem;
flex-wrap: wrap;
}
/***Contact Links***/
.contact-details {
font-size: 1.3rem;
font-weight: 200;
padding: 0.9rem;
transition: transform 0.3s ease-out;
}
/***Contact Links Mouse-Over Behaviour***/
.contact-details:hover {
transform: translateY(15px);
}
/* 600px / 16px = 37.5em */
@media (max-width: 37.5em) {
.contact-header > h2 {
font-size: 3rem;
}
}
/* 600px / 16px = 37.5em */
@media (max-width: 37.5em) {
.contact-header > P {
font-size: 1rem;
}
}
/***Footer Container***/
footer{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 6.25rem;
border-top: 5px solid var(--main-purple);
background-color: var(--main-purpledark)
}
/***Footer Paragraph / Text***/
footer > p {
color: var(--main-purplelight);
font-weight: 100;
margin: 25;
font-size: 1em;
}
/***Footer Anchors / Links***/
footer > a {
color: var(--main-purplelight)
}
/* 600px / 16px = 37.5em */
@media (max-width: 37.5em) {
footer {
display: flex;
flex-direction: column;
justify-content: space-evenly;
text-align: center;
font-size: 1.2em;
height: 10rem;
}
}