CSS media query content changing its position

Question

so i have a little react todo app, in the phone or tablet or whatever device i want it to look the same i dont really know mediaqueries really good if its only case to fix it? or are there any other ways? also i would be very happy to see media query solution too because i have no idea how to do it

import './App.css'
import {useState,useEffect} from 'react'


function App () {
const[searchBar,setSearchBar] = useState('')
const [todos,setTodos] = useState([])
const [newTodo,  setNewTodo] = useState('')


const handleChange = (e) =>{
  setNewTodo(e.target.value)
}

const handleSubmit = (e) =>{
    e.preventDefault()

    const adding = {
      task: newTodo,
      id:Math.floor(Math.random() * 100000),
      

    }
    if(newTodo.length){
    setTodos(todos.concat(adding))
    setNewTodo('')
    } 
}

const handleClick = (id) =>{
setTodos(todos.filter((event) =>{
  return id !== event.id
}))
console.log(id)
}


const searchTodos = (e) =>{
setSearchBar(e.target.value)
}


  return (
<div className='center'>
  <div className='header'>

<div className='searchbar'>

<h2>Search ToDos</h2>
<input type="text" value={searchBar} onChange={searchTodos} name='search' />
</div>
</div>
<div className='container-of-todos'>
  <h1 className='head'>ToDos :</h1>
 <ul>
   {todos
   .filter((val)=>{
if(searchBar===''){
  return  val
} else if(val.task.toLowerCase().includes(searchBar.toLocaleLowerCase())) {
  return val

}
   }).map((todo =>{
     return(
       <li key={todo.id}>{todo.task}
      <button className='button-9' onClick={() =>handleClick(todo.id)}>delete</button>
       </li>
       
     )
   }))}
 </ul>

</div>
<form onSubmit={handleSubmit}  className='add'> 
<h2>Add ToDos</h2>
  <input  value={newTodo} onChange={handleChange} />
</form>
</div>
  )
}



export default App

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');


body{
  box-sizing: border-box;
  font-family: 'Roboto Condensed', sans-serif;
  background-color: #212D40;
  color: white;
}
.header{
  text-align: center;
}
.container-of-todos{
  background-color: #eee;
  width:500px;
  margin: 20px auto;
  border-radius: 6px;


}
ul{
   
  display: flex;
  justify-content: center;
  color: black;
  flex-direction: column;
  padding-left: 0pt;
  gap:5px;
 
 
}
li{
  width: 99%;
  list-style-type: none;
  border:2px solid #7a8391;
  background-color: #72a2f0;
  color: white;
  border-radius: 5px;
  display:flex;
  flex-direction: column;
  font-weight: 550;
  margin-bottom: 5px;
   
}

.delete{
justify-self: center;
align-self: flex-end;
font-weight: 700;
}

.add{
  text-align: center;
}
.center{
  max-width: 960px;
  margin: auto;
}
.searchbar input{

margin-left: 10px;
}

input{
  width: 500px;
  height: 24px;
  border-radius: 6px;
}



.button-9 {
  appearance: button;
  backface-visibility: hidden;
  background-color: #405cf5;
  border-radius: 6px;
  border-width: 0;
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
  outline: none;
  overflow: hidden;
  justify-self: flex-end;
  align-self: flex-end;
  text-align: center;
  text-transform: none;
  transform: translateZ(0);
  transition: all .2s,box-shadow .08s ease-in;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 50px;

}

.button-9:disabled {
  cursor: default;
}

.button-9:focus {
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
}

.head{
  color: rgb(69, 127, 141);
  text-align:center;
}
```*emphasized text*

Answer 1

@media is used to add blocks of css if certain condition is true. You can add to your CSS something like

 .example { color: blue; } /* screen 600px and down */ @media only screen and (max-width: 600px) {.example {color: red;} } /* screen 600px and up */ @media only screen and (min-width: 600px) {.example {color: green;} } /* screen 800px and up */ @media only screen and (min-width: 800px) {.example {color: black;} } /* screen 1100px and up */ @media only screen and (min-width: 1100px) {.example {color: purple;} } /* screen 1200px and up */ @media only screen and (min-width: 1200px) {.example {color: aqua;} }

 <.DOCTYPE html> <html> <head> </head> <body> <h1 class="example">Resize the browser window to see how the background color of this paragraph changes on different screen sizes.</h1> </body> </html>

and change text colors by screen size (note that you must go from smallest to largest).

as for scale per device, I would advise you to leave px and start using percentage instead of width: 500px you can change to width: '20%' or whatever looks good to you