Personnal Portfolio - Media Query issue

Tell us what’s happening:

Hello, on the “Personnal Portfolio” exercise, I passed the test on CodePen, but on freeCodeCamp, it tells me that the point “Your portfolio should use at least one media query.” is not valid. I have more than one media query. I put my CSS and the link down below, I don’t understant the problem.

Your code so far

https://codepen.io/Halfonx/pen/zYRBrZO?editors=1100

/* MEDIA QUERIES */

@media (min-width: 621px) {
  #projects-grid a h3 {
    opacity: 0;
    transition-duration: 0.3s;
  }
}  
  #projects-grid a .project-tile:hover h3 {
    opacity: 1;
    transform: translateY(-1rem);
  }
}

@media (max-width: 620px) {
  #welcome-section {
    font-size: 3rem;
    padding: 0 1rem;
  }
  
  .nav-link {
    font-size: 1rem;
  }
  
  #projects-grid a h3 {
    opacity: 1;
  }
  
  .project-name {
    top: 13rem;
  }
}

@media (max-width: 520px) {
  #projects {
    height: auto;
    padding: 2rem;
  }
  
  #projects-grid {
    display: block;
  }
  
  .project-tile {
    margin: 1rem 0;
    width: 100%;
  }
  
  .project-icon {
    margin: 0 auto;
    width: fit-content;
    display: flex;
    position: relative;
    top: 1rem;
  }
  
  .project-name {
    top: 3rem;
  }
}

@media (max-width: 500px) {
  #welcome-section {
    font-size: 2rem;
  }
}

Your browser information:

User Agent is: Chrome/101.0.4951.54

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

Hi @Halfonx !

Welcome to the forum!

Did you properly link your CSS file to the html document?

<link rel="stylesheet" href="styles.css">
1 Like

You do have one syntax error (you closed the media query too early).

@media (min-width: 621px) {
  #projects-grid a h3 {
    opacity: 0;
    transition-duration: 0.3s;
  }
}  
  #projects-grid a .project-tile:hover h3 {
    opacity: 1;
    transform: translateY(-1rem);
  }
}

But that isn’t why it is failing. It appears to be the scripts at the bottom causing it.

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

If I remove them it passes the tests.

Not really sure what is happening and I didn’t investigate it much. But the scripts do look odd in the test iframe. Not sure where the "use strict"; inside the script elements are coming from but it seems like something is happening in the build process.


I opened an issue.

1 Like

I’ve just checked it to be sure but yes, I did it properly !

Thank you, I didn’t notice it when saving the code, I’ve corrected it

As you said, it seems to be the problem. I removed it and I could complete the project. The script is for using icons from Ionic, I could have used the SVG instead.

Thank you for your help !