EthanOB
KPCKevin Powell - Community
•Created by EthanOB on 6/18/2024 in #front-end
CSS Container Queries not working
I was going over the bare basics of container queries in CSS and I was not able to get the colour paragraph inside the container to change when the div's size is >=400px
<style>
.container {
container-type: inline-size;
border: 2px solid black;
}
p {
background-color: blue;
}
@container (min-width: 400px) {
p {
background-color: red;
font-size: 2rem;
}
}
</style>
<body>
<div class="container">
<p>Card content</p>
</div>
</body>
Other things worked... like the paragraph's font size would change at that breakpoint, but this background colour just wouldn't. Does anyone know why?
2 replies
KPCKevin Powell - Community
•Created by EthanOB on 6/15/2024 in #front-end
article or section element?
9 replies
KPCKevin Powell - Community
•Created by EthanOB on 6/10/2024 in #front-end
Results summary component Frontend mentor
Hey, I decided to go back to basics in frontend web development so I did a level 1 Frontend mentor project. I would like feedback on the semantics of my HTML, the organisation of my CSS, and also my javascript if possible.
Thank You
(I couldn't put this on codepen because my javascript reads from a json file, and you need codepen pro to upload JSON files)
So here's the link to:
The live site: https://results-component-6d3d4d.netlify.app/
The github repo: https://github.com/EtFX1/Frontend-Mentor-results-summary-component
6 replies