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 decrease it decreases, however I would like to leave them with the positioning fixed on the screen, so that they do not "sambando" the screen when using a tablet or mobile with the size of different screens. I've tried using position: fixed but it does not work.
I use:
Materialize
HTML5 code:
<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><scripttype="text/javascript" src="js/materialize.min.js"></script> </body> </html>
CSS3 code:
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: