Your portfolio should use at least one media query

HTML-CSS
1

Hello! I am undergoing testing to create a portfolio page. I need to solve a problem. “Your portfolio should use at least one media query”. I added a media request, but why doesn’t it go through?

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="styles.css">
	<style>
		
body {
	margin: 0;
	padding: 0;
	position: relative;
}

header {
	position: fixed;
	top: 0;
		background-color: #E91;
		width: 100%;
	height: 50px;
}
#navbar {
	display: flex;
	justify-content: center;
	padding: 15px 0;
}
#navbar a {
	margin: 0 20px 0;
	}

	/*******************/
main {
	margin: 50px 0 0;
}
#welcome-section {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
h2 {
	text-align: center;
}

.projects-img {
	display: flex;
	flex-wrap: wrap;
	}

img {
	width: 400px;
	height: 400px;
}

#Work {
	background: #D82;
	display: block;
	padding: 30px 0;
	margin: 50px 0 0;
}
p {
	text-align: center;
}
#Work a {
	padding: 0 20px 0 0;
	display: inline-block;
}
.links {
	display: flex;
	justify-content: center;
}

button {
	margin: 50px auto;
	width: 100px;
	height: 50px;
	display: block;
	background-color: #D62;
}

@media {max-width: 780px;}{
img {
	width: 300px;
	height: 300px;
}
}
		</style>
</head>
<body>
	<header>
		<nav id="navbar">
			<a href="#welcome-section">О нас</a>
			<a href="#projects">Работа</a>
			<a href="#Work">Контакты</a>
		</nav>
	</header>
	<main>
		<section id="welcome-section">
			<h1 class="welcome-section-hi">Hello</h1>
			<p class="welcome-section-text">I`m web-developer</p>
		</section>
		<section id="projects">
			<h2>Projects</h2>
			<hr>
			<div class="projects-img">
			<img class="project-tile" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="page">
			<img class="project-tile" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="page">
			<img class="project-tile" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="page">
			<img class="project-tile" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="page">
			<img class="project-tile" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="page">
			<img class="project-tile" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="page">
			</div>
			<button><a target="_blank" href="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg"></a>Connect</button>
		</section>
		<section id="Work">
			<h2>Work</h2>
			<p>Contacts</p>
			<div class="links">
			<a id="profile-link" target="_blank" href="https://github.com/freecodecamp">Github</a>
			<a href="https://github.com/freecodecamp">Github</a>
			<a href="https://github.com/freecodecamp">Github</a>
			<a href="https://github.com/freecodecamp">Github</a>
			<a href="https://github.com/freecodecamp">Github</a>
			</div>
		</section>
	</main>
</body>
</html>

/* file: styles.css */


   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.160 YaBrowser/22.5.4.904 Yowser/2.5 Safari/537.36

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

2

This isn’t quite right. Refer to MDN: Using media queries.

3

Hello there!

Media queries should have the following syntax:

@media  mediatype  (expressions) {
  CSS-Code;
}

So your max-width should be withing two parenthesis and not curly brackets

4

I fixed the mistake. But my code still doesn’t pass.

@media only screen and (max-width: 780px) {
img {
	width: 300px;
	height: 300px;
}
}
5

It looks like the test wants your media query to be in the styles.css editor.

1 Like
6

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