VScode code looks different in FCC

Tell us what’s happening:

I wrote my code for the “landing page” project in VScode but when i pasted it in FCC it looks totally screwed up. I edited the stylesheet link and the img src links to be URL instead of local. I am using CSS grid for the page which shows when inspecting the preview but the content isnt following the rules I set in the CSS. Anyone had this issue before and figured out a solution?

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tech Document</title>
  </head>
  <body>
    <div class="banner">
      <header id="header">
          <img id="header-img" src="https://www.harvesthope.org/sites/default/files/images/Horizontal%20-%20Green%20w-%20Green%20Text%403x.png">
         <div class="navbox">
          <nav id="navbar">
            <ul class="nav-list">
              <li class="nav-link">What We Do</li>
              <li class="nav-link">Get Involved</li>
              <li class="nav-link">Find Help</li>
              <li class="nav-link">About Us</li>
            </ul>
          </nav>
        </div>
      </div>
        </header>
        <div class="img1"> <img class="man" src="https://www.harvesthope.org/sites/default/files/images/4B6A5082%20copy.jpg"></div>
      <section class="What-We-Do">
          <div class="What-We-Do"><h2 class="section-head">The Need</h2>
          <p class="section1-1">One in ten of our South Carolina neighbors, including almost 150,000 children, face hunger on a daily basis.<br><br>
              Most of the people that visit Harvest Hope Food Bank are just like you; many never imagined they would be in this situation. 
               They might have<br> fallen on hard times due to a job loss or medical expenses. The access to food that we provide often means that our clients can afford
             to pay <br>for their medication, not fall behind on rent, or cover transportation to their jobs.<br><br>
              The average visitor to our emergency food pantry comes just three times before they have gotten back on their feet
               and regained self-sufficiency.<br> Food pantries are a lifeline that helps people avoid losing their jobs, falling into poverty, or becoming homeless.
                Often our former clients come<br> back to volunteer and pay it forward to other people. </p><br><br>
             <h2 class="section-head">How can we help?</h2>
              <p class="section1-4">People facing food insecurity may find relief in several ways. Schools feed children during the day, but at nights,
                   on weekends, and during<br> holidays, families often struggle and stretch to make sure everyone has enough. Similarly, government programs
                    like SNAP are a great help,<br> but often don’t provide enough to make it through the month. To truly address the hunger issue, organizations like 
                    Harvest Hope are needed to <br>provide food to families who need a little help.<br><br>
                    Visit our Get Involved page to learn more about what you can do to help neighbors in the communities around you. 
                      You can also advocate for<br> policies concerning food insecurity with your local officials. We have an impact statement flyer that you can use that
                       highlights our FY 2023 stats <br>as well as food insecurity rates. No matter the action you take, every action has potential to make a huge impact!
                      </div>
      </section>
      <section class="Get-Involved">
          <h2 class="section-head">Get Involved</h2>
          <h3>Volunteer</h3>
          <p>Harvest Hope utilizes 10,000 volunteers a year in order to keep operations running at our facilities. Last year, volunteers put in more than 65,000 
            hours of service, allowing the organization to invest over $1 million back into food sourcing and distribution!</p><br>
            <h3>How Do I become a volunteer?</h3><br>
            <p>Please click "Get Started" to register</p>
            <input type="button" value="GET STARTED"><br><br>
            <h2>Help us stock our shelves!</h2><br>
            <p>Thousands of residents, schools, churches, and businesses generously <br>donate food to the Harvest Hope each year through a variety of <br>
              corporate, civic, and holiday food drives.<br><br>
              <h4>What is a Food Drive?</h4><br>
              <p>A food drive is a concentrated effort to collect non-perishable food in a certain time period. You and/or your organization will work 
                with Harvest Hope Food Bank in coordinating your organization’s food drive.</p><br>
             <h4>Traditional vs. Virtual</h4><br>
             <p> A traditional food drive is when you visit a grocery store and purchase non-perishable food items to deliver to Harvest Hope.
               A virtual food drive is a fast, online way to make the same impact without leaving home or the office.</p>
      </section>
      <section class="Find-Help">
            <h2 class="section-head">If you need food, we can help.</h2>
            <p>You can get food from any of our partner agencies in 20 SC counties. <br><br>Harvest Hope has emergency food pantries in Greenville and 
              Columbia, but those may not be the closest to you, so check below to see what's nearby. *Hours may vary. Please call before visiting.*</p>
      </section>
      <section class="About-Us">
            <h2 class="section-head">About-Us</h2>
            <h3>Child Feeding Programs</h3>
            <p>Harvest Hope feeds hungry children through our BackPack programs, which provide meals and high nutrition snacks for children after school.<br><br>
              Many children only eat at school, and dread going home for the weekend when they know they will be hungry. Backpack programs operate<br> during
               the school year and provide children who are at risk of hunger with healthy nutritious food to take home for the weekend, during school vacations,
                and on holidays. <br><br>
                Backpacks or other containers are stocked with nutritious, child-friendly and easy to prepare food. They are typically distributed
                 discreetly on <br>Fridays or the last day children attend school for the week. We strive to fill each child’s backpack with enough food for dinner on
                  Friday and<br> breakfast, lunch, dinner and snacks on Saturday and Sunday.<br><br>
                  SIf you are interested in donating or want additional information on how 
                  you can help, please contact us at agency.relations@harvesthope.org.</p>
      </section>
      <quote class="quote"> 
         <hr>
      <quote id="quote">1/10<br> South Carolinians face hunger on a daily basis.</quote>
      <hr>
    </quote>
    <div class="img2"><img src="https://www.harvesthope.org/sites/default/files/images/4B6A4950%20copy.jpg" class="cans"></div>
    <form class="sub">
      <h3 class=sub-title>Want to stay up to date?</h3><br>
      <p>Sign-up for our monthly newsletter!</p><br>
      <input type="email" placeholder="Johnsmith@example.com" ID="email"><input type="submit" value="Sign-Up" class="btn"> 
    </form>
  </body>
</html>

/* Reset styles */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

html {
  background-color: var(--HHgreen);
}

:root {
  font-size: 16px;
  --HHgreen: #2b5147;
  --HHcream: #fcf9ec;
  --HHleaf: #2b8257;
  --HHred: #bc2b55;
  --HHorange: #b9692d;
  --HHyellow: #eebb1c;
  --HHmint: #c2e1cd;
  box-sizing: border-box;
  /*border: 1px solid red;*/
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--HHgreen);
  line-height: 1.9em;
  display: grid;
  overflow-x: hidden;;
  padding-right: 20px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(25px, auto);
  gap: 10px;
  color: var(--HHcream);
  margin-right: 20px;
  margin-left: 10px;
  margin-bottom: 5%;
  margin-top: 50px;
}

.banner {
  height: 100%;
  width: 100%;
  grid-area: banner;
  position: sticky;
  align-self: start;
  top: 0;
  overflow: hidden;
  grid-column: 1/5;
  grid-row: 1;
}

header {
  grid-area: header;
  
}

.What-We-Do {
  grid-area: what;
  grid-column: 1/5;
  grid-row: 2/3;
  margin-top: 40px;;
}

.Get-Involved {
  grid-area: get;
  grid-column: 1/3;
  grid-row: 3;
}

.Find-Help {
  grid-area: help;
  grid-column: 1/3;
  grid-row: 4/4;
}

.About-Us {
  grid-area: about;
  grid-column: 3/5;
  grid-row: 3;
}

.img1 {
  grid-area: img1;
  display: flex;
  grid-column: 3/5;
  grid-row: 2;
  margin-top: 50px;
}

.man {
  max-width: 100%;
  display: flex;
  align-self: center;
  justify-self: end;
}

.quote {
  grid-column: 2/3;
  grid-row: 3;
  align-self: center;
  font-size: 1.4em;
  line-height: 1.1em;
  justify-content: center;
  width: 50%;
  text-align: center;
  justify-self: center;
}

#quote {
  line-height: 1.8em;
  font-weight: 800;
}
#quote::before {
content: '" ';
}

#quote::after {
  content: ' "';
}

hr {
  border: 2px solid var(--HHorange);
  margin: 1.5rem 0;
}

.img2 {
  grid-column: 3/5;
  grid-row: 3/5;
  display: flex;
  width: 60%;
  max-height: 75%;
  align-self: end;
  justify-self: center;
  position:  relative;
  bottom: 50px;
}

.cans {
  max-width: 100%;
}

.section-head {
  font-size: 1.6em;
  color: var(--HHred);
  margin-bottom: 2vw;;
}

.sub {
  grid-column: 1/5;
  grid-row: 5;
  font-size: 1.6em;
  justify-content: center;
  background-color: var(--HHyellow);
  width: 100vw;
  height: 4vw;
  padding-top: 10px;
  padding-bottom: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sub h3 {
  justify-self: center;
  grid-column: 1/3;
}

.sub p {
  justify-self: center;
  grid-column: 1/3;
  grid-row: 2;
}

.sub #email {
  grid-column: 1/3;
  grid-row: 3;
  width:15%;
 justify-self: center;
 position: relative;
 right: 50px;
}

.sub .btn {
  grid-column: 1/3;
  grid-row: 3;
  justify-self: center;
  width: 5%;
  position: relative;
  left: 120px;
}







/* Header styles*/

header {
  height: 100%;
  width: 100%;
  background-color:  var(--HHmint);
  color: var(--HHgreen);
  display: flex;
  position: sticky;
  top: 0;
  align-items: center;
  justify-content: space-between;
}

#header-img {
  width: 15%
}

nav {
  display: block;
  width: 100%;
}

nav ul {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  height: 100%;
}

.navbox {
  width: 45%;
  display: inline;
  align-content: center;
  float: right;
}


#navbar {
  height: 100%
}

.nav-list {
  align-items: center;
  list-style-type: none;
}

 .nav-list .nav-link:hover {
  cursor: pointer;
  background-color: var(--HHgreen);
  color: var(--HHmint);
}

.li {
  float: right;
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

Hi @austindonovan45 ,

I copied your code to run both locally and on FCC. Their layouts both look screwed up.
I don’t think it has anything to do with you writing your code on VScode.
I think you should check your CSS grid rules again to make sure it works as your expectation.

@toan Here is a screenshot of my VScode live server (I still have some edits to do so dont judge too harshly:

What exactly do you mean by “screwed up” then?
Can you also post a screenshot of your landing page running on FCC?

When I run your code, I only see one problem which is the text overlay the image as below:

Of course, you can’t see this problem if your screen has bigger resolution and the window size bigger.
I think it must have something to do with the CSS code.

This is my FCC preview (on the same monitor):

Now, that IS weird.
I tried your provided code on FCC and it worked beside the mentioned overlay text.

Maybe try to clear browser cache, disable browser extensions, and try again somehow.

As far as I can tell, it is caused by the explicit height set on the containers for the editor preview and how it interacts with grid-auto-rows: minmax(25px, auto)

If you add a height to the html/body

html,
body {
  height: 100%;
}

It should look the same locally.

Using min and max content seems to work better.

grid-auto-rows: minmax(min-content, max-content);


Also, it looks different in Chrome vs Firefox in the editor preview. But not locally using height: 100% on html/body. So there seems to be some inconsistency between the two browsers.