Tengo un sitio que quiero hacerlo responsive, pero al disminuir el tamaño de pantalla, logro que se oculte el menú lateral, pero el espacio que deja queda en blanco y "bloquea" para que el contenido lo ocupe, perdiendo espacio e impidiendo que se ajuste responsivamente. He tratado corregir cambiando los parámetros de nav y container pero no lo logro corregir.
Adjunto pantallazo para que se entienda el problema
Pantalla tamaño web Pantalla móvil
Adjunto código de una de las páginas y el css que hicieron.
.main-container {
margin-left: 1px;
margin-top: 70px;
}
.btn-index {
min-height: 150px;
}
.card-header {
font-size: 18px;
}
.my-form-control-xs {
height: 27px !important;
}
/* Inicio Loader */
.bg_load {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #EEE;
z-index: 1131
}
.loader {
display: none;
position: fixed;
left: 50%;
top: 50%;
z-index: 1132;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 5px solid #f3f3f3;
border-top: 7px solid #0061f2;
border-radius: 50%;
width: 120px;
height: 120px;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.bg_load > h1 {
font-size: 40px;
position: absolute;
text-align: center !important;
margin: 0 auto;
width: 98%;
top: 65%;
}
/* Fin Loader */
/* placeholder para campos sin valor */
.alertplaceholder::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1; /* Firefox */
font-size: 0.8em;
font-style: italic;
}
.alertplaceholder:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
font-size: 0.8em;
font-style: italic;
}
.alertplaceholder::-ms-input-placeholder { /* Microsoft Edge */
color: red;
font-size: 0.8em;
font-style: italic;
}
/* fin placeholder */
.pendiente {
color: red;
font-size: 0.8em;
font-style: italic;
font-weight: normal;
}
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<link rel="shortcut icon" href="../../Content/assets/img/favicon.png" />
<!-- *** Css Styles *** -->
<!-- requerido para esconder la parte nativa en SP -->
<link href="../../Content/css/stylesSP.css" rel="stylesheet" />
<!-- estilos del template -->
<link href="../../Content/css/stylesTemplate.css" rel="stylesheet" />
<!-- estilos de la App -->
<link href="../../Content/css/stylesApp.css" rel="stylesheet" />
<!-- Icons -->
<link href="../../Content/icons/font-awesome/css/fontawesome.min.css" rel="stylesheet" />
<%-- <link href="../../Scripts/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" />--%>
<%--<link href="../../Scripts/plugins/select2/css/select2.min.css" rel="stylesheet" />--%>
<%--<link href="../../Scripts/plugins/dataTable/css/datatables.min.css" rel="stylesheet" />--%>
<%--<link href="../../Scripts/plugins/bootstrap-tags/bootstrap-tagsinput.css" rel="stylesheet" />--%>
<%--<link href="../../Scripts/plugins/JsTree/dist/themes/default/style.css" rel="stylesheet" />--%>
<!-- Main Csom -->
<SharePoint:ScriptLink Name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
<!-- **** Javascript Files **** -->
<script src="../../Scripts/plugins/jquery/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="../../Content/bootstrap/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="../../Content/icons/font-awesome/js/all.min.js" type="text/javascript"></script>
<script src="../../Scripts/plugins/knockoutJs/knockout.js" type="text/javascript"></script>
<script src="../../Scripts/plugins/koTemplate/koTemplatel.min.js" type="text/javascript"></script>
<script src="../../Scripts/plugins/spPlus/sharepointplus.min.js" type="text/javascript"></script>
<script src="../../Scripts/plugins/spMagic/SPJ.js" type="text/javascript"></script>
<script src="../../Scripts/plugins/jquery-loading-overlay/loadingoverlay.min.js" type="text/javascript"></script>
<script src="../../Scripts/utils/myHelpers.js" type="text/javascript"></script>
<script src="../../Scripts/modulos/repositorios/myUsuarioRepo.js" type="text/javascript"></script>
<script src="../../Content/js/scripts_template.js" type="text/javascript"></script>
<script src="../../Scripts/modulos/home/index.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
</asp:Content>
<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
Page Title
</asp:Content>
<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<body class="nav-fixed">
<!-- ko template : { name: 'header', template: 'master' } -->
<!-- /ko -->
<div id="layoutSidenav_content">
<main>
<%-- Inicio Contenido Dinamico --%>
<div class="container-fluid main-container">
<div class="row">
<div class="col-sm-12">
<ol class="breadcrumb mt-2 mb-4">
<li class="breadcrumb-item">
<a href="/sites/ControlHoras/SistemaHH/SiteAssets/Pages/Home/Index.aspx">Home
</a>
</li>
<li class="breadcrumb-item active">Gestión de Horas</li>
</ol>
</div>
</div>
<div class="card main-card">
<div class="card-header">Módulos del Sistema</div>
<div class="card-body">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4 pr-4 pl-4 pt-4 pb-4">
<a href="/sites/ControlHoras/SistemaHH/SiteAssets/Pages/Cliente/Index.aspx" class="btn btn-green btn-block btn-index">
<i class="fas fa-address-book fa-3x text-center text-light"></i>
<h3 class="mt-4 text-light">Clientes</h3>
</a>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 pr-4 pl-4 pt-4 pb-4">
<a href="/sites/ControlHoras/SistemaHH/SiteAssets/Pages/CentroCosto/Index.aspx" class="btn btn-green btn-block btn-index">
<i class="fas fa-project-diagram fa-3x text-center text-light"></i>
<h3 class="mt-4 text-light">Centros de Costo</h3>
</a>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 pr-4 pl-4 pt-4 pb-4">
<a href="/sites/ControlHoras/SistemaHH/SiteAssets/Pages/HojaTiempo/Index.aspx" class="btn btn-green btn-block btn-index">
<i class="fas fa-tasks fa-3x text-center text-light"></i>
<h3 class="mt-4 text-light">Hoja de Tiempo</h3>
</a>
</div>
</div>
</div>
</div>
</div>
<%-- Fin Contenido Dinamico --%>
</main>
</div>
<!-- ko template : { name: 'footer', template: 'master' } -->
<!-- /ko -->
</body>
</asp:Content>