Search code examples
htmlcssmedia-queriescss-animationsmargin

Problem with Margin on a Loader (Desktop version)

I have a problem with a loader on my home page, I have to use a tablet look for the desktop version, with space on the left and right of the website. So i used, margin : 0 auto 0 auto for the body on desktop. The problem is my loader is also following this rule, it's not in the center anymore, I've tried to give it a margin : 0 but doesn't work, I've also tried to give a negative margin, it's moving but it's not really responsive.. If you have any solution, I would appreciate ! I'll provide some pictures so you can understand easier : LoaderAfter the loader

.chargement {
    width: 100%;
    height: 100%;
    position: absolute;
    animation-name: loading;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
}
.chargement_bloc {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chargement_bloc-cercle {
    width: 130px;
    height: 130px;
    border-radius: 100%;
    border: 20px solid #fff;
    border-right-color: transparent;
    animation-name: circle;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    visibility: hidden;
}
@keyframes circle {
    0% {
        visibility: visible;
        transform: rotate(0deg);
    }
    99% {
        visibility: visible;
        transform: rotate(1500deg);
    }
    100% {
        z-index: -1;
        visibility: hidden;
    }
}
@keyframes loading {
    0% {
        background-color: #9356DC;
        z-index: 1;
    }
    99% {
        z-index: 1;
        background-color: #9356DC;
    }
    100% {
        z-index: -1;
        visibility: hidden;
    }
}


html {
    width: 100%;
}

body {
    margin: 0;
}

@media (min-width: 993px) {
    body {
        width: 993px;
        margin: 0 auto 0 auto;
        background-color: #5D5D5D;
}
}
<body>
<!-- Barre de chargement -->
    <div class="chargement">
        <div class="chargement_bloc">
            <div class="chargement_bloc-cercle"></div>
        </div>
    </div>
</body>

Solution

  • The margin is there because on your media-queries you are using min-width So essentially your media-queries are being implemented in your desktop version, which is not what you want. Hence, it is using the width: 993px; you set to it.

    I changed min-width to max-width assuming you want the media styles to happen BELOW 993px. max-width: 993px = anything below 993px. So now, between 0-993px screen width, your media queries will take effect. Alternatively, min-width: 993px means anything ABOVE the set range, in this case 993px.

    .chargement {
    width: 100%;
    height: 100%;
    position: absolute;
    animation-name: loading;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
    animation-position: center;
}
.chargement_bloc {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chargement_bloc-cercle {
    width: 130px;
    height: 130px;
    border-radius: 100%;
    border: 20px solid #fff;
    border-right-color: transparent;
    animation-name: circle;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    visibility: hidden;
}
@keyframes circle {
    0% {
        visibility: visible;
        transform: rotate(0deg);
    }
    99% {
        visibility: visible;
        transform: rotate(1500deg);
    }
    100% {
        z-index: -1;
        visibility: hidden;
    }
}
@keyframes loading {
    0% {
        background-color: #9356DC;
        z-index: 1;
    }
    99% {
        z-index: 1;
        background-color: #9356DC;
    }
    100% {
        z-index: -1;
        visibility: hidden;
    }
}


body {
    margin: 0;
}

@media (min-width: 993px) {
    body {
        width: 993px;
        margin: 0 auto 0 auto;
        background-color: #5D5D5D;
    }
    
    .chargement {
      width: 993px;
    }
}
    <body>
<!-- Barre de chargement -->
    <div class="chargement">
        <div class="chargement_bloc">
            <div class="chargement_bloc-cercle"></div>
        </div>
    </div>
</body>