I am trying to make a @media query to finish the challenge. I have made one, and the challenge just does not seem to recognize it? The page does not respond to them either, so I have no idea what is going on.
Should this not be a functioning @media query? I have also attached my for reference. I am unsure what else could be preventing it from working.
@media only screen and (max-width: 720px) {
#welcome-section {
height: 500px !important;
background-color: green !important;
}
}
#welcome-section{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #262629;
height: 1000px;
border: 5px solid green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
<body>
<main>
<header>
<ul id='navbar'>
<li><a id='profile-link' target='_blank'>About</a></li>
<li><a href='#projects'>Work</a></li>
<li>Contact</li>
<ul>
</header>
<section id='welcome-section'>
<h1> Welcome to the page of Michael R.
<h2> Up and coming web developer </h2>
</section>
<section id='projects'>
<h2> Project samples</h2>
<div id='projects-grid'>
<div class='project-tile'>
<a href='www.google.com' target='_blank'>
<img class='tile-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg'></img>
</a>
<p class='tile-text'>Tribute Page</p>
</div>
<div class='project-tile tile2'>
<a href='www.google.com' target='_blank'>
<img class='tile-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png' href='www.google.com' target='_blank'></img>
</a>
<p class='tile-text'>Random Quotes</p>
</div>
<div class='project-tile tile3'>
<a href='www.google.com' target='_blank'>
<img class='tile-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg' href='www.google.com' target='_blank'></img>
</a>
<p class='tile-text'>Map Data</p>
</div>
<div class='project-tile'>
<a href='www.google.com' target='_blank'>
<img class='tile-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg'></img>
</a>
<p class='tile-text'>Tribute Page</p>
</div>
<div class='project-tile tile2'>
<a href='www.google.com' target='_blank'>
<img class='tile-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png' href='www.google.com' target='_blank'></img>
</a>
<p class='tile-text'>Random Quotes</p>
</div>
<div class='project-tile tile3'>
<a href='www.google.com' target='_blank'>
<img class='tile-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg' href='www.google.com' target='_blank'></img>
</a>
<p class='tile-text'>Map Data</p>
</div>
<a class='btn' target='blank_' href='www.google.com'> Show all > </a>
</section>
<section id='signing-off'>
<h2>Let's work together...</h2>
<h3>... How do you take your coffee?</h3>
<div class='contact-links'>
<a href='google.com' target='_blank' class='soc-btn'>
<i class="fab fa-facebook-square"></i>
Facebook
</a>
<a href='google.com' target='_blank' class='soc-btn'>
<i class="fab fa-github"></i>
Github
</a>
<a href='google.com' target='_blank' class='soc-btn'>
<i class="fab fa-twitter"></i>
Twitter
</a>
<a href='google.com' target='_blank' class='soc-btn'>
<i class="fas fa-at"></i>
Email
</a>
<a href='google.com' target='_blank' class='soc-btn'>
<i class="fas fa-mobile-alt"></i>
Call me
</a>
<div/>
<section>
</main>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Link to the challenge:
Hey! Can you please add your HTML code here so we can help you better. so far, your media query (the condition and the syntax )seems to work for me.
this media query will be applied for any screen below 721px
Is this not what you intend to do?
Hey Staranbeer. Thank you for your reply. I have updated it with all my HTML. Sorry for the mess in advance.
You are correct, the media query should apply to any screen below 721px, but really, I am just trying to get any media query through at this point. I have tried selecting different elements, conditions, properties etc. without success, and I can’t see what the issue is.
Okay there might be multiple reasons for that. One could be that you’re using an extensions that messing with the tests on freeCodeCamp or you’re using an incompatible browser. If the problem continues, you can try resetting the challenge and try again.
As for the media query itself, i literally copy pasted your media query and the only thing i changed was the selector to suit my own selector and it worked fine for me but still it would be nice if you copy paste the whole code so we can look at the code better.
I did not have this issue in previous challenges that involved a @media query.
I updated my original post with all my HTML. It also contains the id referenced by the media query, but here is my full CSS:
@media only screen and (max-width: 600px){
#welcome-section {
height: 500px !important;
background-color: green !important;
}
}
main{
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
a{
color: white;
text-decoration: none;
}
header{
width: 100%;
height: 70px;
background-color: #BE3144;
top: 0px;
left: 0px;
position: sticky;
}
#navbar{
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
#navbar li{
margin: 10px 15px;
list-style: none;
font-size: 25px;
color: white;
}
#welcome-section{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #262629;
height: 1000px;
border: 5px solid green;
}
#welcome-section h1{
color: white;
font-size: 3rem;
text-align: center;
width: 50vw;
}
#welcome-section h2{
color: #BE3144;
text-align: center;
margin-top: -10px;
}
#projects{
background-color: #45567D;
width: 100%;
min-height: 100vh;
padding: 0 0 50 0;
text-align: center;
}
#projects h2{ /*tile-title*/
text-align: center;
color: white;
font-size: 36px;
padding-top: 40px;
}
#projects-grid{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}
.project-tile{
min-width: 350px;
width: 25%;
height: 370px;
background-color: #303841;
padding: 20px;
margin: 20px;
}
.tile-text{
text-align: center;
color: white;
font-size: 30px;
margin: 20px;
}
.tile-image{
width: 100%;
max-height: 80%;
object-fit: cover;
min-height: 80%;
object-fit: cover;
border: 2px solid #EEF2F7;
}
.btn{
background: #303841;
position: relative;
color: white;
padding: 18px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
top: 15px;
}
#signing-off{
text-align: center;
height: 100vh;
background: #303841;
}
.fab{
content: "\f082";
}
#signing-off h2{
font-size: 3.8rem;
font-family: 'Raleway', sans-serif;
color: white;
padding-top: 100px;
margin: 3px;
}
#signing-off h3{
color: white;
margin: 0;
padding-top: 10px;
padding-bottom: 50;
font-weight: 400;
}
.contact-links{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 5px;
flex-wrap: wrap;
}
.soc-btn{
padding: 1rem 2rem;
background: #303841;
color: white;
text-decoration: none;
font-size: 20px;
}
.soc-btn p{
display: inline;
}
I also need to see your HTML to be double sure about the code
Here’s my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
<body>
<main>
<header>
<ul id='navbar'>
<li><a id='profile-link' target='_blank'>About</a></li>
<li><a href='#projects'>Work</a></li>
<li>Contact</li>
<ul>
</header>
<section id='welcome-section'>
<h1> Welcome to the page of Michael R.
<h2> Up and coming web developer </h2>
</section>
<section id='projects'>
<h2> Project samples</h2>
<div id='projects-grid'>
<div class='project-tile'>
<a href='www.google.com' target='_blank'>
<img class='tile-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg'></img>
</a>
<p class='tile-text'>Tribute Page</p>
</div>
<div class='project-tile tile2'>
<a href='www.google.com' target='_blank'>
<img class='tile-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png' href='www.google.com' target='_blank'></img>
</a>
<p class='tile-text'>Random Quotes</p>
</div>
<div class='project-tile tile3'>
<a href='www.google.com' target='_blank'>
<img class='tile-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg' href='www.google.com' target='_blank'></img>
</a>
<p class='tile-text'>Map Data</p>
</div>
<div class='project-tile'>
<a href='www.google.com' target='_blank'>
<img class='tile-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg'></img>
</a>
<p class='tile-text'>Tribute Page</p>
</div>
<div class='project-tile tile2'>
<a href='www.google.com' target='_blank'>
<img class='tile-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png' href='www.google.com' target='_blank'></img>
</a>
<p class='tile-text'>Random Quotes</p>
</div>
<div class='project-tile tile3'>
<a href='www.google.com' target='_blank'>
<img class='tile-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg' href='www.google.com' target='_blank'></img>
</a>
<p class='tile-text'>Map Data</p>
</div>
<a class='btn' target='blank_' href='www.google.com'> Show all > </a>
</section>
<section id='signing-off'>
<h2>Let's work together...</h2>
<h3>... How do you take your coffee?</h3>
<div class='contact-links'>
<a href='google.com' target='_blank' class='soc-btn'>
<i class="fab fa-facebook-square"></i>
Facebook
</a>
<a href='google.com' target='_blank' class='soc-btn'>
<i class="fab fa-github"></i>
Github
</a>
<a href='google.com' target='_blank' class='soc-btn'>
<i class="fab fa-twitter"></i>
Twitter
</a>
<a href='google.com' target='_blank' class='soc-btn'>
<i class="fas fa-at"></i>
Email
</a>
<a href='google.com' target='_blank' class='soc-btn'>
<i class="fas fa-mobile-alt"></i>
Call me
</a>
<div/>
<section>
</main>
</body>
</html>
when i run your code, this is the only test that doesn’t pass for me.
That’s weird. That one passes for me. I think I will just chalk it up to the challenge acting strange and start over then.
Thanks for all your help, Staranbeer. Have a lovely day.
1 Like
The code you have shared works on my end. Please ensure that you have disabled any extensions that interface with the freeCodeCamp website (such as Dark Mode and Ad Blocker), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.
system
March 19, 2023, 9:04pm
11
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
