Product-landing page error

@media only screen and (max-width: 600px) {


@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  position: fixed;
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;

li {
  float: left;

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #111;
}`<header id="header"><img id="header-img" src="">
 <nav id="nav-bar">
  <li><a href="#home" class="nav-link">Home</a></li>
  <li><a href="#news" class="nav-link">News</a></li>
  <li><a href="#contact" class="nav-link">Contact</a></li>
  <li><a href="#about" class="nav-link">About</a></li>
<iframe width="560" height="315" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>

  <div id="home"></div>
  <div id="news"></div>
  <div id="contact"></div>
  <div id="about"></div>

<footer><form id ="form" action="">
  <input type="email" name="email" placeholder="Enter A Email" id="email">
  <input type="submit" name="submit" id="submit" action="" >

My image is big with a whit background but the changes I made to the nav do not show and I’m stuck . Thanks in advance

It’s easier to provide help if you give a link to your pen rather than a code snippet and a screenshot.

Line one in the CSS editor has a media query that’s not closed so the rest of the selectors are not being seen.

Side note, if you click the generic reply button I do not get notified that you’ve responded.
If you click the reply link in my post I’ll get notified.
Another way to ensure that I (or any user you reply to) get notified of your response is to mention their @Name. For instance, I’m @Roma

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