Personal Portfolio Webpage - Media Query

Ecila · August 29, 2023, 10:29am

Hey! I already passed the challenge. But then I made some changes and it won’t let me pass again because “Your portfolio should use at least one media query.”

But I have one in my CSS and it is working:

@media only screen and (max-width: 600px) {
body {
font-size: 20px;
}
}

Here is my HTML





<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Your Portfolio</title>
</head>
<body>
  <nav id="navbar">
    <ul>
      <li>
        <a href="#welcome-section">HOME</a>
      </li>
      <li>
        <a href="#projects">INFO</a>
      </li>
      <li>
        <a href="#profile-link">CONTACT</a>
      </li>
    </ul>
  </nav>
  <link rel="stylesheet" href="styles.css">
  <section id="welcome-section">
    <div class="welcome-content">
      <h1>About ...</h1>
      <div class="textcon">
        <article>
          
          <p>text</p>
          <p>text</p>
        </article>
        <article>
      
          <p>text</p>
          <p>text</p>
        </article>
      </div>
    </div>
  </section>
  <section class="flexcon">
    <div class="image-container"><img src="#" alt="Image" class="enlarge-on-hover floating-image"></div>
  </section>
  <section id="projects">
    <div class="project-tile">
      <a href="#">Project</a>
    </div>
    <div class="project-tile">
      <a href="#">Project</a>
    </div>
  </section>
  <section id="profile-stuff">
    <div class="profile-content">
      <h2>Contact</h2>
      <p>Text</p><a href="mailto:xx" target="_blank">Email</a> <a href="#" target="_blank" id="profile-link">text</a>
    </div>
  </section>
  <footer>
    <p>© 2023 </p>
  </footer>
</body>
</html>

Here is my CSS


body {
  font-family: 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 0;
  color: #333; 
  font-size: 20pt;
}


#navbar {
  position: fixed;
  top: 0;
  background-color: #8fb19d; 
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

#navbar ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  padding: 20px;
}

#navbar a {
  text-decoration: none;
  color: #fff; 
  padding: 10px 20px;
  transition: color 0.3s ease-in-out;
  margin-right: 30px;
  font-size: 25pt;
}

#navbar a:hover {
  color: #cda2db; 
}


#welcome-section {
  background-color: #cda2db; 
  padding: 100px 0;
}

#welcome-section .welcome-content {
  max-width: 1600px;
  margin: 0 auto;
  color: white;
}

#welcome-section h1 {
  font-size: 100px;
  font-family: 'Playfair Display', serif;
  margin-left: 10px;

}


.project-tile {
  background-color: #f0e4e4; 
  padding: 20px;
  margin: 20px;
  text-align: center;
  border: 2px solid #8fb19d; 
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.project-tile:hover {
  transform: translateY(-5px);
}

.project-tile a {
  text-decoration: none;
  color: #333; 
}

#profile-stuff {
  background-color: #f0e4e4; 
  text-align: center;
  padding: 100px 0;
}

#profile-stuff .profile-content {
  max-width: 800px;
  margin: 0 auto;
  color: #333; 
}

#profile-stuff h2 {
  font-size: 28px;
  font-family: 'Playfair Display', serif;
}

#profile-stuff a {
  display: inline-block;
  margin: 10px;
  padding: 10px 20px;
  text-decoration: none;
  color: white;
  background-color: #8fb19d; 
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
  font-weight: bold;
}

#profile-stuff a:hover {
  background-color: #cda2db; 
}


footer {
  text-align: center;
  padding: 20px;
  background-color: #f0e4e4;
  color: #333; 
  font-size: 14px;
}

.image-container {
  position: relative;
  overflow: hidden;
  margin: auto;

}

.enlarge-on-hover {
  width: 700px;
  height: auto;
  margin: 10px;
  border-radius: 20px;

}

.enlarge-on-hover:hover {
  transform: scale(1.5);
}

.flexcon{
display: flex;
flex-wrap: wrap;
}

.floating-image {
  animation: floatAnimation 5s infinite;
}

@keyframes floatAnimation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.textcon{
display: flex;

}

article {

margin:20px;
padding: 50px;
 text-align: justify;

}

@media only screen and (max-width: 600px) {
  body {
    font-size: 15px;
  }
}

Everything seems to be working just fine and the media query is doing its job. So why won’t it let me pass?

Guided · August 29, 2023, 10:36am

Welcome to the community

To display code in a post use three back tics ` before and after a code block.
If you cant find a back tic on your keyboard use ALT + 096 to display one.

what changes did you make to your code?

Ecila · August 29, 2023, 10:45am

Thank you!

I changed a lot. Almost everything. My first site was garbage and I wanted something more elaborate. But now it doesn’t accept my media query anymore.

Guided · August 29, 2023, 11:02am

I can see the query is working.

try adding a test query
eg.

@media (max-width: 800px) {
  
    div {
     background-color: green; 
    }  
}

see if it allows a pass.

If it doesn’t, the problem might not be with the media query.
When debugging you can use browser tools to see what is happening with your code, and if necessary you can comment out sections of code to narrow down where the issue is

Ecila · August 29, 2023, 11:07am

Thanks for your reply!

Your test media query is working. Just as my media query is working, too. But it still will not let me pass. I already commented out each section of my CSS and the problem couldn’t be found. I’ll do the same for my HTML, but I doubt that the mistake is there.

Guided · August 29, 2023, 11:59am

I’m sorry I was unable to help.
If your issue isn’t solved by the end of the day, you could try making a post in the ‘general’ forum.

A lot of more experienced programmers tend to check posts there.

If you do need to write a new post, make sure you link to the old one, and explain everything you’ve tried so far.

Ecila · August 29, 2023, 12:04pm

Oh, don’t worry! Thank you very much for your quick response
I will put it in general, if the issue doesn’t get solved.

Ecila · August 30, 2023, 9:16am

Hey everyone,

I have this issue that FCC won’t let my media query pass, although it is working. I tried to replace the query with some other examples. They all work fine but it still won’t let me pass. I also tried different Browsers and deleting every line of my CSS individually to pinpoint the problem. But I wasn’t succesful. Can somebody help me?

I already made a post but we couldn’t solve the problem:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Your Portfolio</title>
</head>
<body>
  <nav id="navbar">
    <ul>
      <li>
        <a href="#welcome-section">HOME</a>
      </li>
      <li>
        <a href="#projects">INFO</a>
      </li>
      <li>
        <a href="#profile-link">CONTACT</a>
      </li>
    </ul>
  </nav>
  <link rel="stylesheet" href="styles.css">
  <section id="welcome-section">
    <div class="welcome-content">
      <h1>About ...</h1>
      <div class="textcon">
        <article>
          
          <p>text</p>
          <p>text</p>
        </article>
        <article>
      
          <p>text</p>
          <p>text</p>
        </article>
      </div>
    </div>
  </section>
  <section class="flexcon">
    <div class="image-container"><img src="#" alt="Image" class="enlarge-on-hover floating-image"></div>
  </section>
  <section id="projects">
    <div class="project-tile">
      <a href="#">Project</a>
    </div>
    <div class="project-tile">
      <a href="#">Project</a>
    </div>
  </section>
  <section id="profile-stuff">
    <div class="profile-content">
      <h2>Contact</h2>
      <p>Text</p><a href="mailto:xx" target="_blank">Email</a> <a href="#" target="_blank" id="profile-link">text</a>
    </div>
  </section>
  <footer>
    <p>© 2023 </p>
  </footer>
</body>
</html>

body {
  font-family: 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 0;
  color: #333; 
  font-size: 20pt;
}


#navbar {
  position: fixed;
  top: 0;
  background-color: #8fb19d; 
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

#navbar ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  padding: 20px;
}

#navbar a {
  text-decoration: none;
  color: #fff; 
  padding: 10px 20px;
  transition: color 0.3s ease-in-out;
  margin-right: 30px;
  font-size: 25pt;
}

#navbar a:hover {
  color: #cda2db; 
}


#welcome-section {
  background-color: #cda2db; 
  padding: 100px 0;
}

#welcome-section .welcome-content {
  max-width: 1600px;
  margin: 0 auto;
  color: white;
}

#welcome-section h1 {
  font-size: 100px;
  font-family: 'Playfair Display', serif;
  margin-left: 10px;

}


.project-tile {
  background-color: #f0e4e4; 
  padding: 20px;
  margin: 20px;
  text-align: center;
  border: 2px solid #8fb19d; 
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.project-tile:hover {
  transform: translateY(-5px);
}

.project-tile a {
  text-decoration: none;
  color: #333; 
}

#profile-stuff {
  background-color: #f0e4e4; 
  text-align: center;
  padding: 100px 0;
}

#profile-stuff .profile-content {
  max-width: 800px;
  margin: 0 auto;
  color: #333; 
}

#profile-stuff h2 {
  font-size: 28px;
  font-family: 'Playfair Display', serif;
}

#profile-stuff a {
  display: inline-block;
  margin: 10px;
  padding: 10px 20px;
  text-decoration: none;
  color: white;
  background-color: #8fb19d; 
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
  font-weight: bold;
}

#profile-stuff a:hover {
  background-color: #cda2db; 
}


footer {
  text-align: center;
  padding: 20px;
  background-color: #f0e4e4;
  color: #333; 
  font-size: 14px;
}

.image-container {
  position: relative;
  overflow: hidden;
  margin: auto;

}

.enlarge-on-hover {
  width: 700px;
  height: auto;
  margin: 10px;
  border-radius: 20px;

}

.enlarge-on-hover:hover {
  transform: scale(1.5);
}

.flexcon{
display: flex;
flex-wrap: wrap;
}

.floating-image {
  animation: floatAnimation 5s infinite;
}

@keyframes floatAnimation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.textcon{
display: flex;

}

article {

margin:20px;
padding: 50px;
 text-align: justify;

}

@media only screen and (max-width: 600px) {
  body {
    font-size: 15px;
  }
}

Ecila · August 30, 2023, 10:13am

Thanks for your reply

I tried it on two seperate Browsers and paused all my extensions. Sadly, it didn’t change much.

I also turned off dark mode.

Ecila · August 30, 2023, 10:26am

Thanks for your help. it is quite frustrating because I already passed the challenged. But now it isn’t working anymore and I don’t know why.

Ecila · August 30, 2023, 10:37am

I changed everything. My first Website was just a funny picture because I didn’t have much time. My new Website is a proper thing. But I can’t pass now even though everything works.

Ecila · August 30, 2023, 10:42am

I will!

Hopefully someone finds a solution.

Cody_Biggs · August 30, 2023, 10:49am

Ecila:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Your Portfolio</title>
</head>
<body>
  <nav id="navbar">
    <ul>
      <li>
        <a href="#welcome-section">HOME</a>
      </li>
      <li>
        <a href="#projects">INFO</a>
      </li>
      <li>
        <a href="#profile-link">CONTACT</a>
      </li>
    </ul>
  </nav>
  <link rel="stylesheet" href="styles.css">

You have a duplicate link after your nav that points to the style sheet. Remove it and it should pass

Ecila · August 30, 2023, 10:52am

OMG Thanks so much!

I don’t know how this slipped in between but I couldn’t spot the problem!
Thanks <3

system · February 28, 2024, 10:52pm

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

Topic		Replies	Views
Personal Portfolio Webpage - Build a Personal Portfolio Webpage "Your portfolio should use at least one media query." HTML-CSS	3	1009	November 7, 2023
Personal Portfolio Webpage - Build a Personal Portfolio Webpage HTML-CSS	7	339	March 2, 2023
Personal Portfolio Webpage - Build a Personal Portfolio Webpage_Your portfolio should use at least one media query HTML-CSS	2	284	November 26, 2023
Your portfolio should use at least one media query HTML-CSS	5	6283	January 5, 2023
Personal Portfolio Webpage - Build a Personal Portfolio Webpage HTML-CSS	10	324	March 19, 2023

Personal Portfolio Webpage - Media Query

Related topics