I'm currently working on creating a to-do list with an edit button that matches the height of the div on normal or larger screens. However, when the screen size is reduced to less than 500px, the button collapses and extends beyond its div. Here's how my list appears on medium and larger screens: https://i.sstatic.net/T6wRq.png
But, when I resize the window to below 400 or 500px, it ends up looking like this:
https://i.sstatic.net/v5Jmt.png
Here's the JSX code for my React component:
export default function TodoList(props) {
const list = props.todos.map(todo =>
<div className="TodoList">
<h3 >{todo.todo}</h3>
<div className="btn">
<button>edit</button>
</div>
</div>
)
return (
<div>
{list}
</div>
)
}
And here's what my CSS looks like:
.TodoList{
background: #283048;
background: -webkit-linear-gradient(to right, #859398, #283048);
background: linear-gradient(to right, #859398, #283048);
padding: 2px;
margin: 10px;
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
color: snow;
transform: skew(20deg);
height: 3rem;
}
.TodoList h3{
transform: skew(-20deg);
letter-spacing: 2px;
display: inline-block;
}
.btn{
float: right;
height: 100%;
}
.btn button{
height: 100%
}