How to leave the Object fixed on the screen?

Asked

Viewed 305 times

0

I’m having a problem when I zoom in or out of the browser, my "balloons" they follow the respective command, if you increase it increases, if you zoom out it decreases, but I would like to leave them with the fixed positioning on the screen, so that they do not stay "sambando" across the screen when using a tablet or mobile with different screen sizes. I tried using position:Fixed but it doesn’t work.

Utilise:

Materialize

HTML5:

<html>
    <head>
        <title>ShareTheHealth - Salve Vídas!</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="refresh" content="5; url=index.html">
        <link type="text/css" rel="stylesheet" href="css/stylesheet.css"  media="screen,projection"/>
        <link type="text/css" rel="stylesheet" href="css/thankyou.css"/>
        <link rel="shortcut icon" href="favicon.ico" />
        <!-- AWESOME -->
        <link rel="stylesheet" href="css/font-awesome.min.css" media="screen,projection">
        <!-- MATERIALIZE -->
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
        <link href="css/material-icons.css" rel="stylesheet">
    </head>
    <body>
        <main>
            <!-- BALÃO 2 -->
            <div class="row">
                <div class="col s12">
                    <p class="balao2 white-text">Many thanks for your donation!</p>
                </div>
            </div><!-- FIM BALÃO 2 -->
            <!-- BALÃO 1 -->
            <div class="row">
                <div class="col s12">
                    <p class="balao white-text">Keep on helping us, we need you!
                    </p>
                </div>
            </div> <!-- FIM BALÃO 1 -->
        </main>

        <!-- MATERIALIZE -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

Code CSS3:

body {
    background-image: url("../image/thanku.jpg");
    background-size: 100%;
}

.balao {
    margin-top: 13%;
    margin-left: 17.7%;
    float:left !important;
    background-color:rgba(254,61,64,1);
    border-right:10px solid transparent;
    border-bottom:10px solid rgba(254,61,64,1);
    background-clip: padding-box;
    padding: 15px 10px 10px 10px;
}

.balao2 {   
    margin-top: 15.2%;
    margin-left: 10%;
    float:left !important;
    background-color:rgba(254,61,64,1);
    border-right:10px solid transparent;
    border-bottom:10px solid rgba(254,61,64,1);
    background-clip: padding-box;
    padding: 15px 10px 10px 10px;
}

Problem:

È PARA FICAR ASSIM, INDIFERENTE DO ZOOM

ERRO QUANDO DA ZOOM

html5 css3 materialize

  • Colleague just to see if I really understood... When the screen decreases the balloons get that size according to the second image and you want to leave the size according to the first image that would be it?

  • @Nathan is that, yes. I would like them to stay in the fixed place where I left the first image, but when you zoom in or out they keep moving on the screen equal to the second image.

  • Colleague you have tried to put z-index?

No answers

Browser other questions tagged html5 css3 materialize

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