Estoy diseñando una página web para celulares y me encuentro con que los elementos, al centrarse o lo que sea, lo hacen al ancho del viewport y no al ancho de la página. Al tener elementos que sobresalen del ancho del viewport, los elementos centrados quedan mal centrados, y la barra de navegación se muestra bien solo en la parte del viewport, cuando se scrollea horizontalmente, la misma se corta. Como puedo hacer? Ya que no puedo evitar que esos elementos sean más "chicos" de lo que ya son. Muchas gracias por su tiempo!
Adjunto un ejemplo de lo que me refiero:
Esta es la página hasta el viewport sin scrollear
Y esta es la página cuando se scrollea horizontalmente:
Html:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, shrink-to-fit=no,
user-scalable=0">
{% load static %}
<!-- Icon -->
<link rel="shortcut icon" type="image/png" href="{% static 'img/univac-logo.ico' %}"/>
<!-- Main CSS -->
<link rel="stylesheet" href="{% static 'css/normalize.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-grid.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-grid.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-reboot.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-reboot.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'vendor/perfect-scrollbar/perfect-scrollbar.css' %}">
<link rel="stylesheet" href="{% static 'css/toggler_styles.css' %}">
<link rel="stylesheet" href="{% static 'css/custom_styles.css' %}">
{% block head %}{% endblock %}
<!-- Main JS -->
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'js/jquery-ui.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.js' %}"></script>
<script src="{% static 'js/bootrstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/alerts.js' %}"></script>
<script src="{% static 'vendor/jquery-validate-1.19.1/jquery.validate.min.js' %}"></script>
<script src="{% static 'vendor/jquery-validate-1.19.1/localization/messages_es_AR.min.js' %}"></script>
<title>Univ@c | {% block title %}{% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="brand brand-name">
<a class="navbar-brand ml-auto" href="{% url 'home' %}">
<img src="{% static 'img/univac-logo.bmp' %}" alt="" width="30" height="24" class="d-inline-block align-text-top">
Univ@c
</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item {% if '/clientes/' in request.path %} active {% endif %}" >
<a class="nav-link" href="{% url 'clientes' %}">Clientes</a>
</li>
<li class="nav-item {% if '/cuentas_corrientes/' in request.path %} active {% endif %}">
<a class="nav-link" href="{% url 'cuentas_corrientes' %}">Cuentas corrientes</a>
</li>
<li class="nav-item {% if '/articulos/' in request.path %} active {% endif %}">
<a class="nav-link" href="{% url 'articulos' %}">Articulos</a>
</li>
<li class="nav-item {% if '/pedidos/' in request.path %} active {% endif %}">
<a class="nav-link" href="{% url 'pedidos' %}">Pedidos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">Salir</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
{% block boton %}{% endblock %}
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="head">
</div>
</div>
</div>
{% block content %}{% endblock %}
</div>
</body>
</html>
CSS:
body {
font-family: 'Poppins', sans-serif;
color: black;
text-align: center;
vertical-align: auto;
}
nav{
background-color: #0d88fc;
font-weight: 700;
}