Why is the div outside of the maximum width of the background when I resize the canvas

user_17686318 0
Viewed 54

I am currently learning css and html and I have tried and tried for many days to fix the solution but it end up worse and now I asked help here, can anyone help me why is ".hometext1" is outside of the max width of the background img? I am gonna leave the codes here1

    body,html {
        font-family: Roboto,Helvetica,Arial,sans-serif;
        font-size: 18px;
        height: 100%;
        width: 100%;
        margin: 0; 
        background-color: #ffffff;
        line-height: 1.0;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
    *{
        box-sizing: border-box;
    }
   
    /*parallax*/  
    .bg1 {
        background-image: url('./assets/background/bg3.jpg');
        min-height: 100%;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        opacity: .75;
    }
    .bg2 {
        background-image: url('./assets/background/bg2.jpg');
        min-height: 50%;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        opacity: .75;
    }
    @media only screen and (max-device-width: 1600px) {
        .bg1, .bg2 {
          background-attachment: scroll;
          min-height: 400px;
          min-width: none;
        }
    }
    .hometext1{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        white-space: nowrap;
        margin: 0;
    }
    .hometext2 {
        letter-spacing: 5px;
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 50px 50px;
        font-size: 30px;
        animation: opac 2s;
        border-radius: 10px;
    }
    @keyframes opac{
        0%{
            opacity: 0;
        }
        100%
        {
            opacity: 1;
        }
    }
    .content {
        height: 50%;
        text-align: center;

    }
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="author" content="ozakiharumi">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>
                TEST
            </title>
            <link rel="icon" type="image/x-icon" href="./assets/favicon/favico2.png">
            <link rel="stylesheet" href="./assets/font-awesome/css/font-awesome.min.css">
            <link rel="stylesheet" type="text/css" href="./index.css">
            <script type="text/javascript" src="./index.js"></script>
        </head>
        <body>
            <!--parallax background 1-->
            <div class="bg1">
                <div class="hometext1">
                <span class="hometext2">ARE YOU READY FOR QUANTUM MECHANICS?</span>
                </div>
            </div>
            <!--main content-->
            <div class="content">
                <h2>Quantum Overdose!</h2>
            </div>
            <!--parallax background 2-->
            <div class="bg2"></div>
            <!--footer-->
            <div class="footer">
                <div class="footer-text">© 2021 Quantum Overdose!. All Rights Reserved.</div>
            </div>
        </body>
    </html>

PLS HELP ME

css html
1 Answers

The way to avoid this problem is to write the .hometext1 class style as you see fit in the blocks below. The test application is available at this link. You are having problems because the @media block you added continues to be applied when the page is minimized. Delete the @media block you added and apply the styles you expect when the page gets smaller, using the following structure.

/* Desktop:  1024px > Browser Screen Width > Infinity */
@media screen and (min-width: 1024px) {
    .hometext1{
    /* Styles */
    }
}

/* Tablet: 768px > Browser Screen Width > 1023px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .hometext1{
    /* Styles */
    }
}

/* Smarthphone: 0px > Browser Screen Width > 768px */
@media screen and (max-width: 768px) {
    .hometext1{
    /* Styles */
    }
}
user_150326880
Related