Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
Describe your issue in detail here.

I’m trying to complete the portfolio and the only thing left is the required media query.
I’ve tried several ways of writing a media query and none are accepted.
I had this problem on a previous fCC project earlier and solved it by using the most basic but this time it won’t pass either way.
Apart from the code in styles.css I’ve tried the following:

@media screen (max-width: 600px) {
p {
font-size: 1.6rem;
}
}

@media only screen and (min-width: 600px) {
p {
font-size: 1.6rem;
}
}

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>


<nav id="navbar">
<a href="#welcome-section">About</a>
<a href="#projects">Work</a>
<a href="#contact">Contact</a>
</nav>


<section id="welcome-section">
  <h1>Hey, I'm Phil</h1>
  <p>a web developer</>
</section>


<section id="projects">
  <h2>Here are some of my projects</h2>
  <div id="projects-container">
  <div class="project-tile">
<a href="https://codepen.io/freeCodeCamp/full/zNqgVx">Tribute Page</a>
</div>

  <div class="project-tile"><a href="https://codepen.io/freeCodeCamp/full/qRZeGZ">Random Quote Machine</a>
</div>

  <div class="project-tile"><a href="https://codepen.io/freeCodeCamp/full/wgGVVX">Java Script Calculator</a>
</div>

  <div class="project-tile"><a href="https://codepen.io/freeCodeCamp/full/mVEJag">Map Data Across The Globe</a>
</div>

  <div class="project-tile"><a href="https://codepen.io/freeCodeCamp/full/wGqEga">Wikipedia Viewer</a>
</div>

  <div class="project-tile"><a href="https://codepen.io/freeCodeCamp/full/KzXQgy">Tic Tac Toe Game</a>
</div>
  
  </div>
</section>


<section id="contact">
  <a id="profile-link" href="https://www.freecodecamp.org/fcc9fe3154d-6656-44d4-a416-dccf104eff49" target="_blank"</a>
</section>

</body>
</html>
/* file: styles.css */
* {
box-sizing: border-box;
}

html {
font-size: 62.5%;
--main-gray: #303841;
}

body {
margin: 0;
padding: 0;
overflow: clip;
}

#navbar {
 z-index: 10000;
 position: fixed;
 top: 0px;
 width: 100%;
}​

@media screen (min-width: 600px) {
p {
  font-size: 1.6rem;
}
}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

it’s a really weird thing - swap these two and it will work

1 Like

thanks so much ilenia!
i thought I was going mad :laughing:

I would never have guessed that.

it’s a bug, I am reporting it, you didn’t do anything wrong

1 Like

Ah, ok.
I read a lot about media queries in the process so it wasn’t time wasted haha.

with lots of investigation, I found the issue

image

you have an invisible character that makes that invalid css
paste your code in this to check yourself if you want View non-printable unicode characters

1 Like

Thanks Ilenia!
I learned something new.