how to fix with css this scroll that is created with my images in carousel slide

Question

my problem is that a scroll is created and it is offset in the screen sizes:

https://i.stack.imgur.com/KYTCN.jpg

I'll let you know what happens, some way to solve this and make it look responsive.

I already tried adding overflow: hidden; but it still doesn't work

next code

    <!DOCTYPE html>
<html lang="es">

<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Iconos de Bootstrap-->
    <!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">-->
    <!-- Iconos de FontAwesome-->
   
    <link rel="stylesheet" href="estilo.css" type="text/css">

    
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
 
    <!-- /CORE JS -->

    <title>asdfasd</title>
</head>
<body id="imgFondo">
    <div class="row">
        <div class="col-md-6 col-sm-12">
            <div id="fondo" class="container-fluid px-0 slider-lgn-sm">
                <!-- Carousel -->

                <div id="demo" class="carousel slide" data-bs-ride="carousel">
                    <!-- The slideshow/carousel -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <!-- <div class="d-flex align-items-center justify-content-center">-->
                            <div class="col-md-8 p-2">
                                <!-- <img src="web/assets/img/img1.jpg" alt="Imagen 1"> -->
                                <!-- <img src="web/assets/img/login/2.jpg" alt="Imagen 1"> -->
                                <img src="img3.jpg" alt="Imagen 5">

                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="d-flex align-items-center justify-content-center">
                                <!-- <img src="web/assets/img/img2.jpg" alt="Imagen 2"> -->
                                <!-- <img src="web/assets/img/login/3.jpg" alt="Imagen 2">-->
                                <img src="img3.jpg" alt="Imagen 5">
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="d-flex align-items-center justify-content-center">
                                <!-- <img src="web/assets/img/img3.jpg" alt="Imagen 3"> -->
                                <!-- <img src="web/assets/img/login/4.jpg" alt="Imagen 4"> -->
                                <img src="img3.jpg" alt="Imagen 5">
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="d-flex align-items-center justify-content-center">
                                <!-- <img src="web/assets/img/img3.jpg" alt="Imagen 3"> -->
                                <!-- <img src="web/assets/img/login/5.jpg" alt="Imagen 5"> -->
                                <img src="img3.jpg" alt="Imagen 5">
                            </div>
                        </div>
                    </div>

                    <!-- Left and right controls/icons -->
                    <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </button>
                </div>



            </div>
        </div>
        <div class="col-md-6 col-sm-12 fh">
            <div class="mt-3 mb-5 text-center">
                <img class="d-block mx-auto mb-4" src="web/assets/img/logo1.png" alt="" width="250">
            </div>
            <main class="form-signin">
                <div class="row">
                    <div class="loginForm">
                        <h4 class="text-center">LOGIN<br />INICIAR SESION</h4>
                        <hr class="my-4">
                        <form enctype="multipart/form-data" class="form-validate" autocomplete="off">
                            <input type="hidden" id="seguridad" name="seguridad" value="<?php echo $token; ?>">
                            <div class="row">

                                <div class="col-12">

                                    <label for="usuario" class="form-label">Usuario</label>
                                    <input type="text" class="form-control" name="usuario" id="usuario" onkeyup="mayus(this);" required>
                                    <label for="password" class="form-label">Contraseña</label>
                                    <div class="input-group mb-3">
                                        <input type="password" class="form-control" name="password" id="password" required>
                                        <button class="btn btn-outline-primary" type="button" id="showPass" name="showPass" onclick="mostrarContrasena()">
                                            <i class="fas fa-eye" id="show"></i>
                                        </button>
                                    </div>
                                    <div class="d-grid gap-2">
                                        <button class="btn btn-outline-primary" type="submit">
                                            <i class="fas fa-sign-in-alt"></i> Ingresar
                                        </button>
                                    </div>
                                </div>
                                <hr class="my-4">
                                <div class="text-center">
                                    <a href="#" class="text-body" data-bs-toggle="modal" data-bs-target="#modalRecuperarPass">Olvide
                                        mi contraseña</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- Modal Recuperar contraseña-->
    <div class="modal fade" id="modalRecuperarPass" tabindex="-1" aria-labelledby="modalRecuperarPassLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" id="resetpass">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalRecuperarPassLabel">Recuperar Contraseña</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <form role="form" enctype="multipart/form-data" autocomplete="off">
                            <label for="correoRecuperacion" class="form-label">NOMBRE USUARIO</label>
                            <input type="hidden" id="txtID" name="txtID" class="form-control" value="">
                            <input type="hidden" id="txtProceso" name="txtProceso" class="form-control" value="">
                            <input type="hidden" name="seguridad" value="<?php echo $token; ?>">
                            <input type="text" class="form-control" id="celusuario" name="celusuario" onkeyup="mayus(this);" placeholder="INGRESE USUARIO">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times-circle"></i> Cerrar
                    </button>

                    <button type="button" onClick="enviar_frm1();" class="btn btn-success"><i class="fas fa-lock-open"></i> Recuperar Contraseña
                    </button>
                </div>
                </form>
            </div>
        </div>
    </div>
    </div>
</body>

css code that I am using

    @import url(https://fonts.googleapis.com/css?family=Raleway:300,700);

.contenido {
    width        : 80%;
    margin-left  : auto;
    margin-right : auto;
}

.navbar-collapse {
    justify-content : right;
}
/*
.bg-crediguate {
    background : #79A52B !important;
}
.bg-crediguate a {
    color : #ffffff !important;
}
*/

/*
 * Sidebar
 */

.side_menu {
    -webkit-transition : all 300ms ease-in-out;
    transition         : all 300ms ease-in-out;
    /*background : rgba(0, 20, 60, .9);*/
    background         : #921e30;
    height             : 200vh;
    left               : -250px;
    position           : fixed;
    top                : 0;
    width              : 250px;
    z-index            : 1;
    padding            : 0 1em;
}

.navbar{

    background-color:#79A52B ;
}
.side_menu .nav-link {
    color : #ffffff;
    
}
/* #79A52B */

.side_menu .nav-link:active {
    
    background  : #811222;
    border-left : 3px solid #fff;
}

.burger_box {
    display      : block;
    float        : right;
    margin-right : -57px;
    margin-top   : 78px;
    height       : 43px;
    background   : #921e30;
}

.burger_box a.menu-icon {
    display : inline-block;
    float   : none;
    padding : 10px;
    opacity : .5;
    z-index : 1;
}

.burger_box a.menu-icon:hover,
.burger_box a.menu-icon.opened {
    opacity : 1;
}

.burger_box a.menu-icon.opened {
    /*background : rgba(0, 20, 60, .9);*/
    background : #921e30;
    height     : 43px;
}

.burger_box .menu-icon_box {
    display    : inline-block;
    height     : 25px;
    position   : relative;
    text-align : left;
    width      : 25px;
}

.burger_box .menu-icon_line {
    background    : #fff;
    border-radius : 2px;
    display       : inline-block;
    height        : 3px;
    position      : absolute;
    width         : 100%;
}

.burger_box .menu-icon_line--1 {
    top : 2px;
}

.burger_box .menu-icon_line--2 {
    top : 10px;
}

.burger_box .menu-icon_line--3 {
    top : 18px;
}

.burger_box .menu-icon_line--1 {
    transition         : top 200ms 250ms, transform 200ms;
    -webkit-transition : top 200ms 250ms, -webkit-transform 200ms;
}

.burger_box .menu-icon_line--2 {
    transition         : opacity 0ms 300ms;
    -webkit-transition : opacity 0ms 300ms;
}

.burger_box .menu-icon_line--3 {
    transition         : top 100ms 300ms, transform 200ms;
    -webkit-transition : top 100ms 300ms, -webkit-transform 200ms;
}

.burger_box .menu-icon.opened .menu-icon_box {
    transform         : scale3d(0.9, 0.9, 0.9);
    -webkit-transform : scale3d(0.9, 0.9, 0.9);
}

.burger_box .menu-icon.opened .menu-icon_line {
    top : 10px;
}

.burger_box .menu-icon.opened .menu-icon_line--1 {
    transform          : rotate3d(0, 0, 1, 45deg);
    -webkit-transform  : rotate3d(0, 0, 1, 45deg);
    transition         : top 100ms, transform 200ms 250ms;
    -webkit-transition : top 100ms, -webkit-transform 200ms 250ms;
}

.burger_box .menu-icon.opened .menu-icon_line--2 {
    opacity            : 0;
    transition         : opacity 200ms;
    -webkit-transition : opacity 200ms;
}

.burger_box .menu-icon.opened .menu-icon_line--3 {
    transform          : rotate3d(0, 0, 1, -45deg);
    -webkit-transform  : rotate3d(0, 0, 1, -45deg);
    transition         : top 200ms, transform 200ms 250ms;
    -webkit-transition : top 200ms, -webkit-transform 200ms 250ms;
}

.listado {
    padding-top : 115px;
}

.rounded {
    border-radius : 50px !important;
}

.cantidad {
    font-weight : bold;
}

#misCuentas {
    text-decoration : none;
    color           : #921e30;
    font-weight     : bold;
}

.descargarHistorico {
    text-decoration : none;
    color           : #921e30;
    font-weight     : bold;
}

.btn-crediGreen {
    background    : #79A52B;
    color         : #ffffff;
    border-radius : 20px;
}

.lineaVerde {
    width      : 20%;
    height     : 3px !important;
    margin     : 5% auto;
    background : #79a52b;
    opacity    : 1;
}

.tituloTabla {
    color       : #921e30;
    font-weight : bold;
}

/*
#imgFondo {
   background-image    : url("../img/imglogin/1280x720/3-login-1280x720.png");
    background-position : center;
    background-repeat   : no-repeat;
    background-size     : cover;
  
   height              : 100vh !important;
 overflow: hidden; 
   
}
*/
.loginForm {
    background : RGBA(255, 255, 255, 0.75);
    
    padding    : 30px;
    box-shadow : #000 0 0 6px 1px;
}

.form-signin {
    width     : 100%;
    max-width : 330px;
    margin    : auto;
}

@media (max-width : 767px) {
    .carousel-item img {
        width   : 100% !important;
        display : block !important;
    }

    .fh {
        height : 100vh !important;
        background-image    : url("../img/fondoLogin.jpg");
        background-position : center;
        background-repeat   : no-repeat;
        background-size     : cover;
    }
}

#demo {
    background : #c7c7c7;

}
#validarCuenta, #transferir {
    background-color : #921E30 !important;
    border-color     : transparent;
}

#datosTransferencia, #transferir {
    display : none;
}

any way to fix it

What element(s) have you added `overflow: hidden;` to? Try following [this answer](https://stackoverflow.com/questions/31458477/find-element-that-is-causing-the-showing-of-horizontal-scrollbar-in-google-chrom) to see what element is causing the overflow, and then add the property to that element. — human bean, Nov 30 '22 at 18:35

score 0 · Answer 1 · answered Nov 30 '22 at 19:22

0

I can you give one of the Answer but is sometimes works good you can Block scrollbars try use this code add this code on your css file

* {
overflow-x: hidden;
overflow-y: hidden;
}

but I don't think it will help you fully solve the problem, but that's it, but maybe it will help if I try other things.

answered Nov 30 '22 at 19:22

Whtery1087

24
10

It doesn't work – bendroide Nov 30 '22 at 21:21
@bendroide Okay, maybe problem is on Height and Width i am now not on computer but i try help you later. – Whtery1087 Dec 01 '22 at 05:53

how to fix with css this scroll that is created with my images in carousel slide

1 Answers1