VS Code Live Server Extension not displaying background colors when using CSS Grid layout
Question
Edit: I accidentally made a typo when linking the stylesheet, that was the problem. Not sure if I should edit the title or leave as-is. Let me know if I should.
I was trying some sample code, using the Live Server extension on Visual Studio Code, and every time I click "Open with live server" text will load, but the point of the code was supposed to show the background colors of each section to learn how CSS grid works. It worked fine when using flex, but I have to learn grid for class and nothing is displaying correctly. I tried restarting, uninstalling and reinstalling the live server extension but nothing changed. I even deleted the code and replaced it with my teacher's just in case, but only text shows up, not color. The browser I use is Firefox. My teacher did his on a lecture video, and his worked, so I'm not sure what's wrong. I'm new here so I don't know whether or not to include code, so I will include it just in case. Let me know if it needs to be removed.
HTML
<body>
<main id="grid_container">
<section class="red"></section>
<section class="yellow"></section>
<section class="blue"></section>
</main>
</body>
CSS
.red{
background: red;
}
.yellow{
background: yellow;
}
.blue{
background-color: blue;
}
#grid_container{
display: grid;
grid-template-columns: 10vw 60vw 30vw;
grid-template-rows: 30vh;
}
1 answers
solution1
0 ACCPTED 2022-10-06 15:44:04
did u imported the css style file ( •̀.̫ •́ )✧
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.