Having some trouble with responsiveness on very small screens. Let me break it down: on extremely small screens, my containers keep shrinking until they disappear altogether and shift to the right. Despite using Bootstrap, I can't figure out why this is happening. Can someone provide an explanation?
View screenshot of responsive problem 1
View screenshot of responsive problem 2
Appreciate any solutions you can offer!
This is the HTML and code I'm working with :
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: "poppins", sans-serif;
}
h1 {
margin-top: 20px;
color: #1070b4;
font-size: 25px;
font-weight: bold;
text-transform: uppercase;
}
.logo
{
width: 200px;
}
.navbar-nav {
margin: 0 auto;
}
...
@media screen and (max-width: 992px) {
.container-fluid {
height: 650px;
}
}
@media screen and (max-width: 440px) {
.container-fluid {
width: auto;
}
...
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
...
</body>
</html>