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">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">

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

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

<section id="projects">
  <h2>Here are some of my projects</h2>
  <div id="projects-container">
  <div class="project-tile">
<a href="">Tribute Page</a>

  <div class="project-tile"><a href="">Random Quote Machine</a>

  <div class="project-tile"><a href="">Java Script Calculator</a>

  <div class="project-tile"><a href="">Map Data Across The Globe</a>

  <div class="project-tile"><a href="">Wikipedia Viewer</a>

  <div class="project-tile"><a href="">Tic Tac Toe Game</a>

<section id="contact">
  <a id="profile-link" href="" target="_blank"</a>

/* 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/ 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


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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.