My website, built with Bootstrap, functions properly on desktop and in landscape mode on mobile. However, it encounters issues in portrait mode on mobile where white space appears on the right side and part of the navigation bar is missing.
Below is the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="274548485354535546576712091709170a4542534615">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<ul class="navbar-nav navbar-center mb-2 mb-sm-0">
<li class="nav-item fs-3 mx-5">
<a class="nav-link link-color" aria-current="page" href={% url 'homepage' %}>About</a>
</li>
<li class="nav-item fs-3 mx-5">
<a class="nav-link link-color" aria-current="page" href={% url 'gallery' %}>Gallery</a>
</li>
<li class="nav-item fs-3 mx-5 ">
<a class="nav-link link-color" aria-current="page" href={% url 'guestbook' %}>Guestbook</a>
</li>
</ul>
</nav>
{% block content %}{% endblock %}
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c1ccccd7d0d7d1c2d3e3968d938d938ec1c6d7c291">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>This issue persists across all pages of my website as it acts as the wrapper for them.
Here's a glimpse at my stylesheet:
.img-shrink-100 {
object-fit: contain;
object-position: center;
height: 100px;
}
.img-shrink-250 {
object-fit: contain;
object-position: center;
height: 250px;
}
.img-shrink-700 {
object-fit: contain;
object-position: center;
height: 700px;
}
.p-small {
font-size: 25px;
}
.navbar-nav.navbar-center {
margin: auto;
}
.link-color{
color: #FFF !important;
}
.link-color:hover {
background-color : #999999;
color : white !important;
}
.form-center {
text-align: center;
}
.form-oneline{
display: inline-block;
}
Some users have suggested using overflow-x:hidden to address the white space issue, but this hasn't rectified the cut-off navbar problem (it simply prevents scrolling). As CSS isn't my forte, I'm seeking insights on how to tackle this challenge. Any thoughts?