media queries for phone - css

Question

i am trying to use media queries to have a style for screens larger than 768px and another one for smaller than 768px
when i resize the window the changes are happening but when i'm opening the website with phone or with the phone view in the Chrome inspector it doesnt work as I expect..
thanks !
#media (max-width: 768px) {
body {
background-color: lightblue;
}
}
#media (min-width: 768px) {
body {
display: flex;
justify-content: center;
}
#cont {
background-color: aqua;
width: 80vw;
}
#header {
height: 30vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#tophead {
background-color: blueviolet;
height: 5vh;
display: flex;
justify-content: space-between;
align-items: center;
}
#lefttophead {
height: 80%;
width: 40%;
background-color: yellow;
}
#righttophead {
height: 80%;
width: 20%;
background-color: orange;
}
#lowhead {
height: 10vh;
background-color: gold;
display: flex;
align-items: center;
}
#navbar {
height: 80%;
width: 100%;
background-color: hotpink;
display: flex;
justify-content: space-between;
align-items: center;
}
#onglets {
width: 70%;
height: 80%;
background-color: cadetblue;
}
#searchbar {
width: 20%;
height: 80%;
background-color: skyblue;
}
}