How to remove lateral white space from div’s

Question

How to remove lateral white space from div’s

Asked 4 years, 3 months ago

Viewed 31 times

0

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

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

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

Browser other questions tagged javascript html css div

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

by Inkeliz • **20,671** points · Answer 1 · 2021-07-18T15:10:29+00:00

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.

by Rogerio Chaves • 13 points · Answer 2 · 2021-07-18T15:38:09+00:00

.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