As a novice, I am facing a simple issue.
When I place an input checkbox inside the #container div, it functions correctly. However, when I try to put them within the #container div > #section div, they fail to work.
*,
html,
body {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#content {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
flex-wrap: wrap;
}
@media only screen and (orientation: portrait) {
#content {
flex-direction: column;
}
}
.section {
width: 33%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#today-tasks,
#upcoming-tasks,
#recurring-tasks {
width: 100%;
height: auto;
}
.task {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 8px;
}
/* Text */
.title {
flex: 0;
padding: 4px;
font-size: 4vw;
}
.task-text {
font-size: 6vw;
}
@media only screen and (orientation: landscape) {
.title {
font-size: 3vh;
}
.task-text {
font-size: 6vh;
}
}<body>
<div id="content">
<div class="section" id="today">
<div class="title">
<h4>today</h4>
</div>
<ul id="today-tasks">
<li class="task">
<p class="task-text">task</p>
<input type="checkbox" />
</li>
</ul>
</div>
<div class="section" id="upcoming">
<div class="title">
<h4>upcoming</h4>
</div>
<ul id="upcoming-tasks">
<li class="task">
<p class="task-text">task</p>
<input type="checkbox" />
</li>
</ul>
</div>
<div class="section" id="recurring">
<div class="title">
<h4>recurring</h4>
</div>
<ul id="recurring-tasks">
<li class="task">
<p class="task-text">task</p>
<!-- <label for="toggle"><input type="checkbox" id="toggle" /></label> -->
<input type="checkbox" />
</li>
</ul>
</div>
</div>