How to remove lateral white space from div’s

Asked

Viewed 31 times

0

Problems with the Newbie. There’s a blank space in my div’s:

Espaço em branco do título

I didn’t even bother because it looks like it’s going nowhere, but:

Espaço em branco no site inteiro!

This affects the site on mobile, making this space blank throughout the site. I’ve tried everything looking for gringos and I couldn’t get that unnecessary space out of the div’s

NEXT: The minimum code of only the title.

    addEventListener("load", () => { 
            var index = 0;
            const slides = document.querySelectorAll(".slides");
            const classHide = "slides-hidden", count = slides.length;
            nextSlide();
            function nextSlide() {
        slides[(index++) % count].classList.add(classHide);
                slides[index % count].classList.remove(classHide);
                setTimeout(nextSlide, 900);
            }
    });
$("div#MyImages").each(function () {

    var div = $(this);
    var children = div.children();
    children.detach();
    div.empty();
    div.append(children);

});
* {
    margin: 0;
    padding: 0;
} 

body {
    background-color: black;
    color: white;
    font-family: ubuntu;
}

img {
    display: block;
    float: left;
    border: 0;
}



.slides {
    width: 70%;

}

.slides-hidden {
    display: none;
}

.strainberry-logo {
    position: absolute;
    left: 21%;
    top: 20%;
    display: block;
}

@font-face {
    font-family: ubuntu;
    src: url('ubuntu.otf');
}

@media screen and (max-width: 768px) {
    body {
        background-color: black;
    }
    .strainberry-logo {
        width: 120%;
        left: 9%;
        top: 19%;
        transition: all 0.5s;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>

<html>


<head>

    <script type="text/javascript" src="index.js"></script>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <title>Strainberry</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
        <meta name='viewport' content='width=device-width, initial-scale=1'/>

</head>

<body> 

    <div class="strainberry-logo">

        <img class="slides slides-hidden" src="https://i.ibb.co/Ny1H4vM/stb1.png" draggable="false">
        <img class="slides slides-hidden" src="https://i.ibb.co/rpVXy8L/stb2.png" draggable="false">
        <img class="slides slides-hidden" src="https://i.ibb.co/YdR80My/stb3.png" draggable="false">

    </div>

2 answers

0

I believe the problem is itself width exceeding 100%:

    .strainberry-logo {
        width: 120%; // << AQUI
        left: 9%;
        top: 19%;
        transition: all 0.5s;
    }

Switch to 100% or 100vw and see if it solves the problem.

  • I have tried, but the blank space continues (which keeps making the page bigger). and in all other page elements has tmb and has values less than 100% https://i.imgur.com/Mu0r85d.png

0

.strainberry-logo {
        width: 100%;
        left: 9%;
        top: 19%;
        transition: all 0.5s;
    }

Yeah it’s probably the width of 120% as Inkediz said. Always try to leave width 100%, this helps in the responsibility in changing screens, as you need to change the size but never exceeding 100% width

  • I have tried, but the blank space continues (which keeps making the page bigger). and in all other page elements has tmb and has values less than 100% https://i.imgur.com/Mu0r85d.png

  • try using the developer tool in your browser it will certainly point out which div is causing this problem. Open the body tag and find the div that contains the image

Browser other questions tagged

You are not signed in. Login or sign up in order to post.