Personnal Portfolio - Media Query issue

[Halfonx]

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:

freeCodeCamp.org

[jwilkins.oboe]

Hi @Halfonx !

Welcome to the forum!

@Halfonx

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.

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

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

[lasjorg]

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.

New RWD editor: scripts loaded is making media query test fail

[Halfonx]

@jwilkins.oboe

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

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

@lasjorg

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

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

@lasjorg

But that isn’t why it is failing. It appears to be the scripts at the bottom causing 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 !