I Pass all the test in project 3 but it is not Responsive?

I already completed the project and Pass all the Test but it is not Responsive. how I fix it
here is my code https://codepen.io/solomon123fgt/pen/VwLWGYO

I have moved your post to a more suitable sub-forum.

Some things to note:

  1. CodePen expects only the content within the body tag.
  2. If you want to add links, external script s , or any other meta data, then you need to use the settings tab of the HTML section on CodePen
  3. CSS goes in the CSS section, not a style tag
  4. If you are putting in px as units for your styling, your elements will not be responsive.

Hope this helps

  1. Move the CSS into the CSS code box (remember to remove it from the HTML). Press the down arrow at the top right of the CSS code box and select Analyze CSS. Fix any errors. Then press the arrow button again and select Format CSS.

  2. You are using fixed units (px) for all the sizing. That will make everything fixed in size (i.e. not responsive or fluid). Use relative units (like % or vw) and max-width instead of width when possible.

  3. Study and learn.


as you said when i put my CSS and html in a separate editor in code pen everything is lost/gone.
here is my code. https://codepen.io/solomon123fgt/pen/VwLWGYO
BUT it works when i put Html and CSS together.

You have selected an HTML preprocessor, you don’t want that.

Click the cog at the top left of the HTML code box, then from the dropdown under the “HTML preprocessor” select "None ".

Yes it works.Thank you for your help.

The test script is JavaScript. It would not go in the <head> like you have it. It would go right above the closing body tag. Since it’s codepen and the body tags aren’t needed just put it into the HTML section.

ok Thank you i put it now in the correct Place.
here is the code. i correct
https://codepen.io/solomon123fgt/pen/VwLWGYO?editors=1100

I make everything responsive by using this code. Except for video.
why The video is not Responsive like other content.

   @media (max-width: 1050px)
       {
           #form
         {
             margin-top:110px;
                  margin-left:50%;
         }
         #nav-bar
       {
           margin-left:35%;
         }   
         #video{
           margin-left:40%;
                   }
    
         #header-img
                {
           margin-left:0%;
             }
            }

here is my project code? https://codepen.io/solomon123fgt/pen/VwLWGYO?editors=1100

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

Please do not create multiple posts about the same topic.
You have some errors in your CSS and HTML. Once you fix these, you can move forward.