CSS working differently outside of the freeCodeCamp platform

HTML-CSS
1

Hello, so I finished the Product Landing Page project for the “new” Responsive Web Design certificate and it works great on the freeCodeCamp platform. However, as I decided to test it out on V.S.Code some of the styling were not the same no matter what browser I use. Any help would be AMAZING, thank you.

HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jerk-itz</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styles.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
  </head>
  <body>
    <header id="header"><section id="Home">        
      <nav id="nav-bar">
        <div id="header-img-wrapper"><img src="https://www.logojerky.com/images/logo-jerky-white.png" id="header-img"></div>
          <div class="nav-links-wrapper">
            <ul class="nav-links">
            <li><a href="#Products"  class="nav-link">Products</a></li>
            <li><a href="#About"    class="nav-link">About</a></li>
            <li><a href="#Contact_Us" class="nav-link">Contact Us</a></li>
        </ul>
        </div>  
      </nav>
    </header>
    <main>
      
        <form id="form" action="https://www.freecodecamp.com/email-submit">
        <fieldset>
          <label id="email-label" for="email">
            <div id="label-info">Get updates on upcoming new flavors and products!</div>
  <div id="label-action">Subscribe to our newsletter now.</label>
        <input id="email" type="email" name="email" placeholder="Enter your email">
        <input id="submit" type="submit" value="Submit" href="https://www.freecodecamp.com/email-submit"></div>
    </fieldset>
      </form>
      </section>
      <section id="Introduction" class="intro-section">
        <header><h2 id="intro-header">Introduction</h2></header>
        <p id="intro-parag">Welcome to our jerky world!</p>
        <p class="parag-filler">We are passionate about providing you with a healthy and delicious snack option that's perfect for any occasion. Our beef jerky is made from premium cuts of beef, carefully seasoned and slow-cooked to perfection, giving you a unique and flavorful snacking experience that will keep you coming back for more.</p>

<p class="parag-filler">We offer a wide range of flavors to suit every taste bud, from classic savory options to bold and spicy varieties that pack a punch. Our jerky is also available in different packaging options, making it convenient to enjoy on the go or share with family and friends.</p>

<p class="parag-filler">At our company, we are committed to using only the highest quality ingredients and producing our jerky in a clean and safe environment. We also offer online sales and delivery options, making it easy for you to enjoy our jerky from the comfort of your own home.</p>

<p class="parag-filler">Thank you for choosing our beef jerky, and we hope you enjoy our delicious and nutritious snack!</p> 
        <div class="video-container">
          <iframe id="video" width="560" height="400" src="https://www.youtube-nocookie.com/embed/0TsNp-RMi-s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        </div>
      </section>
      <section id="Products" class="products-section">
        <header><h2>Products</h2></header>
        <ul class="products-list">
          <li class="product-item"><div class="product-name">Beef jerky</div>
          <div class="product-image-wrapper">
            <img src="https://d21klxpge3tttg.cloudfront.net/wp-content/uploads/2012/06/featured-sriracha-beef-jerky-1024x640.jpg" alt="A photo of our beef jerky slices">
          </div>
          <div class="product-description"> Made from premium cuts of beef, carefully seasoned and slow-cooked to perfection.</div></li>
          <li class="product-item"><div class="product-name">Turkey jerky</div>
          <div class="product-image-wrapper">
            <img src="https://www.gourmandize.com/media/turkeyjerky_crop.jpg/rh/turkey-jerky.jpg" alt="A photo of our turkey jerky slices">
          </div>
          <div class="product-description"> Made from turkey meat, which is leaner than beef and offers a different flavor profile.</div></li>
          <li class="product-item"><div class="product-name">Chicken jerky</div>
          <div class="product-image-wrapper">
            <img src="https://www.jerkyholic.com/wp-content/uploads/2021/04/Chicken-Jerky-Glass.jpg" alt="A photo of our chicken jerky slices">
          </div>
          <div class="product-description"> Made from chicken meat, which is also lean and can be seasoned with a variety of spices and flavors.</div></li>
          <li class="product-item"><div class="product-name">Salmon jerky</div>
          <div class="product-image-wrapper">
            <img src="https://media-cdn2.greatbritishchefs.com/media/c20buxg5/img66581.whqc_1536x1024q90.webp" alt="A photo of our salmon jerky slices">
          </div>
          <div class="product-description"> Made from salmon, which is a rich source of omega-3 fatty acids and offers a distinctive flavor profile.</div></li>
          <li class="product-item"><div class="product-name">Vegetarian jerky</div>
          <div class="product-image-wrapper">
            <img src="https://hips.hearstapps.com/hmg-prod/images/beef-jerky-on-wood-board-and-beer-royalty-free-image-542088280-1544558198.jpg" alt="A photo of our vegan jerky slices">
          </div>
          <div class="product-description"> Made from plant-based proteins such as soy, mushrooms, or tofu, which offer a meatless and healthier alternative to traditional jerky.</div></li>
          <li class="product-item"><div class="product-name">Jerky sticks</div>
          <div class="product-image-wrapper">
            <img src="https://www.alewels.com/wp-content/uploads/2018/03/LogsOJerkySampler-1024x640.jpg" alt="A photo of our beef jerky sticks">
          </div>
          <div class="product-description"> Similar to traditional beef jerky, but in stick form, making them easy to eat and share.</div></li>
          <li class="product-item"><div class="product-name">Jerky bites</div>
          <div class="product-image-wrapper">
            <img src="https://catheadsbbq.com/wp-content/uploads/2022/07/dried-meat-snack-on-a-bowl.webp" alt="A photo of our jerky bites">
          </div>
          <div class="product-description"> Bite-sized pieces of jerky, which are perfect for snacking or adding to salads or trail mix.</div></li>
          <li class="product-item"><div class="product-name">Jerky trail mix</div>
          <div class="product-image-wrapper">
            <img src="https://embed.widencdn.net/img/beef/sookbd1zp9/960x720px/beef-jerky-trial-mix-light-horizontal.tif?keep=c&u=7fueml" alt="A photo of our jerky trail mix">
          </div>
          <div class="product-description"> A combination of jerky bites, nuts, and dried fruits, providing a balanced and nutritious snack.</div></li>
          <li class="product-item"><div class="product-name">Jerky protein bars</div>
          <div class="product-image-wrapper">
            <img src="https://healthysubstitute.com/wp-content/uploads/2019/06/4a-homemade-beef-jerky-protein-bars.jpg" alt="A photo of our jerky protein bars">
          </div>
          <div class="product-description"> High-protein bars made with beef, turkey, or other jerky options, providing a convenient and healthy snack option.</div></li>
        </ul>
      </section>
      <section class="aboutus-section" id="About">
        <header><h2>About us</h2></header>
        <p class="parag-filler">At Jerk-itz, we are dedicated to providing you with the highest quality beef jerky snacks that are both delicious and nutritious. Our passion for beef jerky began with a love for the classic snack, but we knew we could do better. That's why we set out to create a better beef jerky that is healthier, more flavorful, and more convenient than anything else on the market.</p>
        <p class="parag-filler">Our beef jerky is made from premium cuts of beef, carefully seasoned and slow-cooked to perfection, ensuring a tender and flavorful snack every time. We offer a wide range of flavors to suit every taste bud, from classic savory options to bold and spicy varieties that pack a punch. All of our jerky is made in small batches to ensure quality and consistency, and we never use any artificial ingredients, preservatives, or fillers.</p>
        <p class="parag-filler">But Jerk-itz is more than just beef jerky. We also offer a variety of other snacks, including turkey jerky, chicken jerky, pork jerky, and even vegetarian jerky made from plant-based proteins. Our snack options include jerky sticks, jerky bites, trail mix, and protein bars, providing you with a variety of convenient and healthy snack options.</p>
        <p class="parag-filler">At Jerk-itz, we are committed to providing you with the best possible snacking experience. Whether you're a fitness enthusiast, busy professional, or just looking for a delicious and nutritious snack, Jerk-itz has something for everyone. Thank you for choosing Jerk-itz, and we hope you enjoy our delicious and nutritious snacks!</p>
      </section>
      <section id="Contact_Us" class="contactus-section">
        <header><h2>Contact Us</h2></header>
        <p class="parag-filler">Our customer service is always available to help you with anything you might need. Do not hesitate to contact us!</p>
       <div class="contact-wrapper"> <div class="contact-option">Email</div><div class="contact-email"><a href="#">jerkitz.lb@gmail.com</a></div></div>
        <div class="contact-wrapper"> <div class="contact-option">Phone Number</div><div class="contact-number">+961 81 950110</div></div>
        <div class="contact-wrapper messagebox"> <div class="contact-option">Send us a message directly!</div>
        <textarea placeholder="Add your messages here..." ></textarea><input id="contact-submit" type="submit" value="Send" href="https://www.freecodecamp.com/email-submit"></div>
      </section>
    </main>
  </body>
</html>

CSS:
*{
  scroll-behavior:smooth; 
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family: Helvetica, sans-serif;
  border:none;
  letter-spacing: 0.03rem;
}  

#nav-bar{
    background-color: #764B38;
  width: 100%;
  position:sticky;
  top:0;
  left:0;
  height: 15%;
  padding: 0;
  box-shadow: 0 15px 25px #764B38AA;
}

#header-img-wrapper{
  position: absolute;
  width:15%;
  height:100%;
  margin: 0 0 0 12.5px;
  display:flex;
  justify-content: flex-start;
}
#header{
  background-color: #E2C8A7;
}

#header-img{
  height:75%;
  margin: 10px 0 0 10px;
}

.nav-links{
  list-style:none;
  display:flex;
  justify-content: flex-end;
  margin: 0 10px 0 0;
  gap:20px;
}

nav a{
  color: #fff;
  text-decoration:none;
  
}

.nav-links-wrapper{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  height: 100%;
  width:100%;
}

main{
  background-color: #E2C8A7AA;
}

fieldset{
  border: none;
  display:flex;
  flex-wrap:nowrap;
}

#form{
  height: 50px;
  margin: 0 0 3rem 1rem;
  padding-top: 1.5rem;
  padding-left: 0.4rem;
  
}

#label-info{
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-weight: 550;
}

#email{
  width: 200px;
}

#email-label{
  display:flex;
  flex-wrap:nowrap;
  text-align:center;
  gap:15px;
}
#submit{
  width: 5rem;
  background-color: #E2C8A7;
  border: 1px solid #764B380f;
}

#submit:hover{
  background-color: #E2C8A7AA;
  border: 1px solid #764B38AA;
}

.intro-section{
  margin:1rem 1rem 2rem 1rem;
}

#intro-header{
  padding: 0 0 1.25rem;
  font-weight:900;
}
#intro-parag{
  padding: 0 0 15px 0;
  font-weight:550;
}
.parag-filler{
  padding-bottom: 1.2rem; 
}
.video-container{
  margin: 1rem;
  display:flex;
  justify-content: center;
  align-items:center;
}

.products-section{
  margin:1rem 1rem 3rem 1rem;
  
}
.products-section h2{
  padding: 0 0 1.25rem;
  font-weight:900;
}
.products-section ul{
  list-style:none;
  display:flex;
  flex-direction: row;
  flex-wrap:nowrap;
  text-align:center;
  overflow-x:scroll;
  margin: 0 10px 0 0;
  gap:20px;
}
.products-section ul li:last-of-type{
  margin: 0 auto;
}
.product-name{
  font-size: 1.15rem;
  padding-bottom: 15px;
  font-weight:550;
}
.product-description{ 
  width: 25rem;
  margin: 1rem 0 0 ;
  
}
.product-image-wrapper{
  width: 260px;
  height: 146.25px;
  margin: 0 auto;
}

.products-section img{
  object-fit: cover;
  
  width:100%;
  height:100%;
}
 
.aboutus-section{
  margin:1rem 1rem 3rem 1rem;
}
.aboutus-section h2{
  padding: 0 0 1.25rem;
  font-weight:900;
}

.contactus-section{
  margin:1rem 1rem 0 1rem;
}

.contactus-section h2{
  padding: 0 0 1.25rem;
  font-weight:900;
}
.contact-email a{
  color: black;text-decoration:none;
}

.contact-email a:hover{
  color: #764B38;
}

.contact-wrapper{
  padding-bottom:15px;
}

#contact-submit{
  width: 5rem;
  background-color: #E2C8A7;
  border: 1px solid #764B380f;
  position: absolute;
  margin-top: 5px;
}

#contact-submit:hover{
  background-color: #E2C8A7AA;
  border: 1px solid #764B38AA;
}

@media (max-width:480px){
  #nav-bar{
    width:100%;
    height:25%;
    position:sticky;
  }
  .nav-links{
    list-style:none;
    display:flex;

    margin: 0 10px 0 0;
    gap:20px;
  }
  #header-img-wrapper{
    position: sticky;
    width:25%;
    height:75%;
    display:flex;
    align-items:center;
    margin:0 auto;
    justify-content:center;
    
  }
  #header{
    background-color: #E2C8A7;
  }
  #header-img{
    height:75%;
  }
  
  .nav-links-wrapper{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    height: 100%;
    width:100%;
  }

  main{
    background-color: #E2C8A7AA;
  }
  #email{
    width: 35vw;
  }
  #form{
    margin-bottom: 75px;
  }
  #label-info{
    font-size:1rem;
  }
  .nav-link:last-of-type{
    white-space:nowrap;
  }
}
2

You should create styles.css file in the VSC, aside from the html file, and then, to put in that file all of the css rules you defined.

3

I’ve done that I just copied and pasted them here for readability. Any other thing you might think of?

4

Could you be more precise? What elements are not styled as you wish?

For the time being, I have found that you defined media query with max-width of 480px, instead of min-width. If you want to see something like this:

image
image1240×567 57.1 KB

you have to change max, in min. Otherwise, you get the following on the screens with a greater width:

image
image1242×310 35.8 KB

Also, check out the html code. It contains a few serious issues:

1 Like
5

That’s exactly my problem. thanks! :smiley:

6

Could you indicate the issues in the html if that’s no problem?

7
  • unclosed ‘section’ element <section id="Home"> - the opening section tag within header element, the closing out of the header element
  • attribute href not allowed on element [input]
  • <div id="label-action">Subscribe to our newsletter now.</label> - the opening div tag, and then a closing label tag…
8

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