Please what should I do here?

HTML-CSS
1

Tell us what’s happening:
Hint message: Your portfolio should use at least one media query.
Your code so far
*** —
@media (max-width: 780px){
img {
width: 300px;
height: 300px;}
}
@media (max-width: 999px) {
header {
position: relative;
flex-direction: column;
justify-content: center;}}***—
WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

Post the entire html and css code here properly formatted.
Check out the following article:

1 Like
3

css*** *{margin:0;
padding:0;
box-sizing:box;}

:root{
–main-white: #f0f0f0;
–main-red: #be3144;
–main-blue: #45567d;
–main-gray: #303841;

}

body {
font-family: ‘Poppins’, sans-serif;
font-size: 1.8rem;
font-weight: 400;
line-height: 1.4;
color: var(–main-white);
}

section{display:block;}

li{list-style-type:none;
display: inline-block;
font-size: 1em;
padding: 10px;
font-weight: bold;
color: var(–main-white);
}

li a{text-decoration: none;
color: var(–main-white);}

#navbar{
display: flex; justify-content: flex-end; position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(–main-red);
box-shadow: 0 2px 0 rgb(0 0 0 / 40%);
z-index: 10;
}
.welcome-section {display: flex; flex-direction: column; justify-content: center; align-items: center;
width: 100%;
height: 100vh; background-color: #000; background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);

.projects{text-align: center;
padding: 10rem 2rem;
background: var(–main-blue);
}

.projects-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1280px;
margin: 0 auto;
margin-bottom: 6rem;}

.contact {background-color: var(–main-blue);}

@media (min-width: 400px){
img {
width: 300px;
height: 300px;}
} ***

4

You can use the format button </> when posting code. Just makes the code easier to read, and copy. Are you still getting the error about the media query?

Can you also post the code for your html? Just makes it easier so we can plug all your code into the challenge and work out any issues to help you on our end

1 Like
6

I saw the last post. So when using the </> You want to make sure you post all code between the lines it gives you. You will use it once for the html, and then use it again for the css

1 Like
7 
type o<!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="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway:700&amp;display=swap" rel="stylesheet">
  </head>
  <link rel="stylsheet" href="styles.css">

</head>

<body>
  <div id="navbar"> 
    <ul>
      <li><a href="" id="About" target="_blank">About</a></li>
      <li><a href="" id="Work" target="_blank">Work</a></li>
      <li><a href="#contact" id="Contact" target="_blank">Contact</a></li>
    </ul>
  </div>

  <section id="welcome-section" class="welcome-section">
    <h1>Hey I'm Mimic</h1>
    <p>a web developer</p>
     </section>

  <section id="projects" class="projects"> 
    <div class="project-header">
    <h2>These are some of my projects </h2>
    </div>
    <div class="projects-grid"> 
     <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project-tile"/> <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="Tribute Page" >
     <p class="project-tile">
       <span class="code"><</span>Tribute Page<span class="code">/><span>
    </p>
    </a>


      <a href="https://codepen.io/freeCodeCamp/full/wgGVVX" target="_blank"> <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="Random Quote Machine" class="project-tile">
<p class="project-tile">
       <span class="code"><</span>Random Quote Machine<span class="code">/><span>
</p>
</a>

      <a href="https://codepen.io/freeCodeCamp/full/mVEJag" target="_blank" class="project-tile" class="project-tile"/><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" alt="JavaScript Calculator">
      <p class="project-tile">
       <span class="code"><</span>JavaScript calculator<span class="code">/><span>
</p>
</a>

<a href="https://codepen.io/freeCodeCamp/full/mVEJag" target="_blank" class="project-title"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg" alt="Map Across The Globe">
<p class="project-tile">
       <span class="code"><</span>Map Across The Globe<span class="code">/><span>
</p>
</a>

<a href="https://codepen.io/freeCodeCamp/full/wGqEga" target="_blank" class="project-title"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png" alt="Wikipedia Viewer">
<p class="project-tile">
       <span class="code"><</span>Wikipedia Viewer<span class="code">/><span>
</p>
</a>

<a href="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" target="_blank" class="project-title"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" alt="Tic Tac Toe">
<p class="project-tile">
       <span class="code"><</span>Tic Tac Toe<span class="code">/><span>
</p>
</a>
    </div>
    </section>

  <div>
    <a href="https://codepen.io/FreeCodeCamp/" class="show-all" target="_blank" id="profile-link">Show all<i class="fas fa-chevron-right"></i></a>
  </div>
  
  <section class="contact" id="contact" >
    <div class="contact-section-header">
    <h1>Let's Work together </h1>
    <p>How do you take your coffee</p>
    </div>

    <div class="contact-section-link">
        <a href="https://facebook.com/freecodecamp" target="_blank" class="btn contact-details"><i class="fab fa-facebook-square"></i> Facebook</a>
        <a id="profile-link" href="https://github.com/freecodecamp" target="_blank" class="btn contact-details"><i class="fab fa-github"></i> GitHub</a>
        <a href="https://twitter.com/freecodecamp" target="_blank" class="btn contact-details"><i class="fab fa-twitter"></i> Twitter</a>
        <a href="mailto:example@example.com" class="btn contact-details"><i class="fas fa-at"></i> Send a mail</a>
        <a href="tel:555-555-5555" class="btn contact-details"><i class="fas fa-mobile-alt"></i> Call me</a>
      </div>
    
       </section>
  <footer> 
      <p>
        © Created for
        <a href="https://www.freecodecamp.com/" target="_blank">freeCodeCamp <i class="fab fa-free-code-camp"></i></a>
      </p>
    </footer>
 
</body>

<html>r paste code here
8 
type or pas*{margin:0;
padding:0;
box-sizing:box;}

:root{
 --main-white: #f0f0f0;
    --main-red: #be3144;
    --main-blue: #45567d;
    --main-gray: #303841;

}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--main-white);
}

section{display:block;}

li{list-style-type:none;
display: inline-block;
font-size: 1em;
padding: 10px;
font-weight: bold;
color: var(--main-white);
}

li a{text-decoration: none;
color: var(--main-white);}

#navbar{
display: flex; justify-content: flex-end;    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--main-red);
    box-shadow: 0 2px 0 rgb(0 0 0 / 40%);
    z-index: 10;
 }
 .welcome-section {display: flex;   flex-direction: column;   justify-content: center;    align-items: center;
width: 100%;
height: 100vh;   background-color: #000;   background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);

.projects{text-align: center;
    padding: 10rem 2rem;
    background: var(--main-blue);
}

.projects-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 4rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 6rem;}

.contact {background-color: var(--main-blue);}

@media only screen and (max-width: 780px) {
img {
	width: 300px;
	height: 300px;
}
}te code here
9

I am still looking at your code, but something came to my eye right away. There is a small issue here. It looks like you are missing the ending brace } before your .projects style. After fixing this issue I submitted the project and it passed
image

1 Like
10

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