I have implemented code in my css file to hide specific items from the topbar on my website. When I view the site on my desktop and inspect it with mobile view, the hidden items appear correctly concealed. However, when I access the website on my phone, these items become visible.
@media screen and (max-width: 768px) {
#topbar {
height: 50vh;
}
#topbar img {
max-height: 90px;
}
#topbar .social-links a {
display:none;
}
#topbar .logo {
display:flex;
align-content:space-evenly;
}
#topbar i {
display:none;
}
#topbar a {
display:none;
}
}