I was wondering if it is possible to hide parts of an image that is positioned with negative px?
Essentially I would like to hide the image part on the very right of the screen that goes past the pink div and purple div. I would also like to hide the image part that goes downwards into the purple part. So only the image on the pink div is visible.
snippet of animation
I have used the animation property to set the positions on page load.
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#div1 {
width: 100%;
height: 100%;
background-color: pink;
}
#dog1 {
animation: fadeIn 3s ease;
animation-fill-mode: forwards;
position: relative;
top: -100px;
left: -100px;
z-index: 1;
}
#keyframes fadeIn {
0% {
position: relative;
top: -100px;
left: -100px;
}
100% {
position: relative;
top: 0px;
left: 0px;
}
}
#div2 {
width: 100%;
height: 500px;
background-color: purple;
z-index: 0;
}
#dog2 {
animation: fadeIn2 3s ease;
animation-fill-mode: forwards;
position: absolute;
bottom: -100px;
right: -100px;
z-index: 1;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/35/%D7%9B%D7%9C%D7%91_%D7%9C%D7%91%D7%9F_%D7%A7%D7%98%D7%9F.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: right bottom;
width: 400px;
height: 400px;
}
#keyframes fadeIn2 {
0% {
position: absolute;
bottom: -100px;
right: -150px;
}
100% {
position: absolute;
bottom: 0px;
right: -50px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation</title>
</head>
<body>
<div id="div1">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/35/%D7%9B%D7%9C%D7%91_%D7%9C%D7%91%D7%9F_%D7%A7%D7%98%D7%9F.jpg" id="dog1" />
<div id="dog2" /></div>
</div>
<div id="div2">
</div>
</body>
</html>
You need to add position: relative to the parent container (div1 in this case) and overflow:hidden to hide the part of the images which goes outside the div. Also remove the position property from the keyframes because it's not used.
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#div1 {
width: 100%;
height: 100%;
background-color: pink;
position: relative;
overflow: hidden;
}
#dog1 {
animation: fadeIn 3s ease;
animation-fill-mode: forwards;
position: relative;
top: -100px;
left: -100px;
z-index: 1;
}
#keyframes fadeIn {
0% {
top: -100px;
left: -100px;
}
100% {
top: 0px;
left: 0px;
}
}
#div2 {
width: 100%;
height: 500px;
background-color: purple;
z-index: 0;
}
#dog2 {
animation: fadeIn2 3s ease;
animation-fill-mode: forwards;
position: absolute;
bottom: -100px;
right: -100px;
z-index: 1;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/35/%D7%9B%D7%9C%D7%91_%D7%9C%D7%91%D7%9F_%D7%A7%D7%98%D7%9F.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: right bottom;
width: 400px;
height: 400px;
}
#keyframes fadeIn2 {
0% {
bottom: -100px;
right: -150px;
}
100% {
bottom: 0px;
right: -50px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation</title>
</head>
<body>
<div id="div1">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/35/%D7%9B%D7%9C%D7%91_%D7%9C%D7%91%D7%9F_%D7%A7%D7%98%D7%9F.jpg" id="dog1" />
<div id="dog2"><!-- typo here -->
</div>
</div>
<div id="div2">
</div>
</body>
</html>
Related
I want to animate a standing line from top to bottom using pure CSS. I have done it but the transform property also gets animated.
.line {
width: 5rem;
height: 1px;
background-color: black;
position: absolute;
top: 3rem;
left: 3rem;
transform: rotate(90deg);
animation: stand linear 1s;
}
#keyframes stand {
0% {width: 0;}
100% {width: 5rem;}
}
<div class="line"></div>
That's because the animation applies for the whole element. Instead of rotating the element and then adjusting its width for the animation, you could do the same think but adjust its height.
.line {
width: 1px;
height: 5rem;
background-color: black;
position: absolute;
top: 3rem;
left: 3rem;
animation: stand linear 1s;
}
#keyframes stand {
0% {height: 0;}
100% {height: 5rem;}
}
<div class="line"></div>
The linear motion of a straight line means the line will start from one point, goes to the second point, and then came back to the starting point. It is a kind of to and from motion. We will be doing it using CSS only.
Approach: The approach is to first create a straight line and then animate it using keyframes. It will be done in a two-step. First for forwarding movement and second for backward movement. The below code will follow the same approach.enter code here
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>
How to animate a straight
line in linear motion?
</title>
<style>
body {
margin: 0;
padding: 0;
background: green;
}
.Stack {
width: 400px;
height: 2px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Stack::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: green;
animation: animate 5s linear infinite;
}
#keyframes animate {
0% {
left: 0;
}
50% {
left: 100%;
}
0% {
left: 0;
}
}
</style>
</head>
<body>
<div class="Stack"></div>
</body>
</html>
I am trying to make a wave effect in css, for that was trying to put a big rotating div with rounded corner at bottom of the page.
But for each refresh of the page, it is moving up or down with no reason, no matter what I was doing.
I don't know it is bad idea to put a div larger size than page itself. But I am not getting any reason why it is jumping around.
width: 100%;
height: 100%;
clip: auto;
position: absolute;
overflow: hidden;
}
div {
width: 500vh;
height: 500vh;
position: absolute;
top: 50%;
left: 50%;
background-color: red;
animation-duration: 10s;
animation-name: example;
animation-iteration-count: infinite;
border-top-left-radius: 40%;
border-top-right-radius: 45%;
border-bottom-left-radius: 35%;
border-bottom-right-radius: 40%;
}
#keyframes example{
from{ transform: rotate(0deg);}
to{ transform: rotate(360deg);}
}
here is complete HTML
<!DOCTYPE html>
<html>
<head>
<style>
html {
width: 100%;
height: 100%;
clip: auto;
position: absolute;
overflow: hidden;
}
div {
width: 500vh;
height: 500vh;
position: absolute;
top: 50%;
left: 50%;
background-color: red;
animation-duration: 10s;
animation-name: example;
animation-iteration-count: infinite;
border-top-left-radius: 40%;
border-top-right-radius: 45%;
border-bottom-left-radius: 35%;
border-bottom-right-radius: 40%;
}
#keyframes example {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
please help
Thanks in advance!
Your body properties aren't defined, simply add it like so :
html,body {
width: 100%;
height: 100%;
clip: auto;
position: absolute;
overflow: hidden;
}
To avoid problems like these, I would recommend always using a div container and not relying on html and body (which behavior is not always constant between browsers).
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
width: 100%;
height: 100%;
clip: auto;
position: relative;
overflow: hidden;
}
div#wavecontainer {
width:100%;
height:100%;
overflow: hidden;
top: 0%;
left: 0%;
position:relative;
}
div#wave {
width: 500vh;
height: 500vh;
position: absolute;
top: 50%;
left: 50%;
background-color: red;
animation-duration: 10s;
animation-name: example;
animation-iteration-count: infinite;
border-top-left-radius: 40%;
border-top-right-radius: 45%;
border-bottom-left-radius: 35%;
border-bottom-right-radius: 40%;
}
#keyframes example {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="wavecontainer">
<div id="wave"></div>
</div>
</body>
</html>
.animationload {
background-color: #fff;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
.osahanloading {
animation: 1.5s linear 0s normal none infinite running osahanloading;
background: #fed37f none repeat scroll 0 0;
border-radius: 50px;
height: 50px;
left: 50%;
margin-left: -25px;
margin-top: -25px;
position: absolute;
top: 50%;
width: 50px;
}
.osahanloading::after {
animation: 1.5s linear 0s normal none infinite running osahanloading_after;
border-color: #85d6de transparent;
border-radius: 80px;
border-style: solid;
border-width: 10px;
content: "";
height: 80px;
left: -15px;
position: absolute;
top: -15px;
width: 80px;
}
#keyframes osahanloading {
0% {
transform: rotate(0deg);
}
50% {
background: #85d6de none repeat scroll 0 0;
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="text-center">
<h2>Creative Animated Loading icon in HTML5 CSS3</h2>
</div>
<div class="animationload">
<div class="osahanloading"></div>
</div>
</div>
</div>
I have the spinner spinning in Chrome but doesn't spin in IE..I get the spinner but it's kind of static. Can someone have a look at the code and please let me know what's missing here.
For reference here's the code where I got the spinner from
Link
I have the spinner working perfectly fine but just is not right in IE.
Thanks
Update
Plunker Link Plunker
IE wasn't liking the extra params you had on your animation CSS. Removing some of the unnecessary parameters worked.
.animationload {
background-color: #fff;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
.osahanloading {
animation: 1.5s linear infinite osahanloading;
background: #fed37f none repeat scroll 0 0;
border-radius: 50px;
height: 50px;
left: 50%;
margin-left: -25px;
margin-top: -25px;
position: absolute;
top: 50%;
width: 50px;
}
.osahanloading::after {
animation: 1.5s linear infinite osahanloading_after;
border-color: #85d6de transparent;
border-radius: 80px;
border-style: solid;
border-width: 10px;
content: "";
height: 80px;
left: -15px;
position: absolute;
top: -15px;
width: 80px;
}
#keyframes osahanloading {
0% {
transform: rotate(0deg);
}
50% {
background: #85d6de none repeat scroll 0 0;
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="text-center">
<h2>Creative Animated Loading icon in HTML5 CSS3</h2>
</div>
<div class="animationload">
<div class="osahanloading"></div>
</div>
</div>
</div>
I can't figure out the reason of the different behavior of my slider in firefox (works fine) and chrome (act weirdly)
I've made a jsfiddle with all the rules in case it was the problem, but it fix nothing...
https://jsfiddle.net/86mmns1z/13/
as you can see, it's a slider controlled by two sets of buttons : the little white in the bottom can get you at the appropriate image, so it works in both direction, with a simple transition
but the red square on the left and right of the slider are working as an infinite slider. I'm doing that by using animation, and hiding or showing the button whether I want it to use the transition or the animation, so that it's always connected to the state of the radio button (I don't know if it's clear...)
however, it's working on firefox but not on chrome (in the jsfiddle i've set the time of the animation to 1.4s so you can clearly see what's going wrong). It seems that transition works before animation, so I've put !important to the animation but it changes nothing
the html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="slider">
<input type="radio" name="arrow" id="left" checked>
<label for="left" id="dotLeft" class="dot"></label>
<label for="left" id="arrowLeft" tabindex="0"></label>
<label for="left" id="arrowFalseRight" tabindex="0"></label>
<input type="radio" name="arrow" id="right">
<label for="right" id="dotRight" class="dot"></label>
<label for="right" id="arrowRight" tabindex="0"></label>
<label for="right" id="arrowFalseLeft" tabindex="0"></label>
<div id="wrapper">
</div>
</div>
</body>
</html>
the css :
/*the animation code*/
#slider #arrowFalseLeft:focus ~ #wrapper {
animation: 1.4s slideLeft;
}
#slider #arrowFalseRight:focus ~ #wrapper {
animation: 1.4s slideRight;
}
#keyframes slideLeft {
0% {left: -300%;}
100% {left: -200%;}
}
#keyframes slideRight {
0% {left: -0%;}
100% {left: -100%;}
}
#slider input#right:checked ~ #wrapper {
left: -200%;
}
/*general settings*/
#slider {
position: relative;
padding-top: 40%;
overflow: hidden;
margin-bottom: 5%;
}
#slider #wrapper {
position: absolute;
top: 0px;
left: -100%;
width: 400%;
height: 100%;
background-image: url(http://4.bp.blogspot.com/-c984SeiXG-M/UK9IxFjg-cI/AAAAAAAABdA/ZG9VuKMcXps/s1600/White+Pelican+Best+Shot.jpg),
url(http://tnregneanimal.tableau-noir.net/pages10/images/hippopotame010.jpg),
url(http://4.bp.blogspot.com/-c984SeiXG-M/UK9IxFjg-cI/AAAAAAAABdA/ZG9VuKMcXps/s1600/White+Pelican+Best+Shot.jpg),
url(http://tnregneanimal.tableau-noir.net/pages10/images/hippopotame010.jpg);
background-size: 25%, 25%, 25%, 25%;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: 0% 0%, calc(100% / 3) 0%, calc(2 * 100% / 3) 0%, 100% 0%;
transition: all 0.4s;
z-index: -1;
}
#slider #arrowLeft {
position: absolute;
height: 5%;
width: 2%;
left: 40px;
top: 45%;
background-color: red;
cursor: pointer;
}
#slider #arrowRight {
position: absolute;
height: 5%;
width: 2%;
right: 40px;
top: 45%;
background-color: red;
cursor: pointer;
}
#slider #arrowFalseLeft {
position: absolute;
height: 5%;
width: 2%;
left: 40px;
top: 45%;
transform: rotate(45deg);
background-color: red;
cursor: pointer;
}
#slider #arrowFalseRight {
position: absolute;
height: 5%;
width: 2%;
right: 40px;
top: 45%;
transform: rotate(45deg);
background-color: red;
cursor: pointer;
}
#slider input#left:checked ~ label#arrowLeft,
#slider input#left:checked ~ label#arrowFalseRight {
display: none;
}
#slider input#right:checked ~ label#arrowRight,
#slider input#right:checked ~ label#arrowFalseLeft {
display: none;
}
#slider input {
display: none;
}
#slider .dot {
position: absolute;
bottom: 10%;
padding-top: 1%;
width: 1%;
border-radius: 50%;
background-color: rgba(200, 200, 200, 0.6);
cursor: pointer;
z-index: 1;
}
#slider #dotLeft {
left: 48.5%;
}
#slider #dotRight {
right: 48.5%;
}
#slider input:checked + .dot {
background-color: rgb(200, 200, 200);
}
does someone know what's happening ?
Im currently trying to do an animation whose end position should look like this, as seen in the image below, noe thay its an animation
It worked fine until I switched to a <1080p resolution, and now its all messed up and looks like this:
I used responsive "vw / %" So i dont understand why is that happening.
And the code itself
body {
background-image: url("https://i.imgur.com/I6ixFFG.jpg");
}
/* background sky */
.fondo {
background-image: url("https://i.imgur.com/UAq0obS.png");
width: 50vw;
height: 20vw;
background-size: cover;
margin: 0 auto;
overflow: hidden;
position: relative;
}
/* Frontal waves */
.olasFront {
background-image: url("https://i.imgur.com/w5yrlLy.png");
position: absolute;
width: 80vw;
height: 13.5vw;
z-index: 3;
bottom: -9vw;
left: -1vw;
animation: olas-front 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
}
/* back waves */
.olasBack {
background-image: url("https://i.imgur.com/e1DVYvt.png");
position: absolute;
width: 80vw;
height: 14vw;
z-index: 1;
bottom: -9vw;
left: -2vw;
animation: olas-back 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
}
/* boat */
.bote {
background-image: url("https://i.imgur.com/Fk4CUZp.png");
position: relative;
z-index: 2;
width: 26vw;
height: 20vw;
background-repeat: no-repeat;
bottom: -7.6vw;
animation: barco 2s linear, barco-balanceo 2s linear infinite;
}
/* question mark */
#interrogacion {
background-image: url("https://i.imgur.com/1g1A4sx.png");
width: 5vw;
height: 5vw;
position: relative;
background-repeat: no-repeat;
margin-left: 10vw;
bottom: 1.5vw;
opacity: 0;
animation: 2s interrogacion 2s linear;
animation-fill-mode: forwards;
}
/* Frontal waves */
#keyframes olas-front {
0% {
left: -1vw;
bottom: -9vw;
}
50% {
left: 0vw;
bottom: -8.7vw;
}
100% {
left: -1vw;
bottom: -9vw;
}
}
/* back waves */
#keyframes olas-back {
0% {
left: -2vw;
bottom: -9vw;
}
50% {
left: -3vw;
bottom: -8.7vw;
}
100% {
left: -2vw;
bottom: -9vw;
}
}
/* boat */
#keyframes barco {
0% {
left: -7vw;
}
100% {
left: 0vw;
}
}
/* boat */
#keyframes barco-balanceo {
0% {
bottom: -7.6vw;
}
50% {
bottom: -7.9vw;
}
100% {
bottom: -7.6vw;
}
}
/* question mark */
#keyframes interrogacion {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="fondo"> <!-- background sky -->
<div class="olasFront"></div> <!-- Frontal waves -->
<div class="bote"> <!-- boat -->
<div id="interrogacion"> <!-- question mark -->
</div>
</div>
<div class="olasBack"></div> <!-- back waves -->
</div>
</body>
</html>
With this code we simply change background size accordingly other objects to maintain same aspect ratio in every screen.
body {background-image: url("https://i.imgur.com/I6ixFFG.jpg");}
.fondo {
background-image: url("https://i.imgur.com/UAq0obS.png");
width: 50vw;
height: 20vw;
background-size: cover;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.olasFront {
background-image: url("https://i.imgur.com/w5yrlLy.png");
position: absolute;
width: 80vw;
height: 13.5vw;
z-index: 3;
bottom: -9vw;
left: -1vw;
animation: olas-front 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
background-size:4vw auto;
}
.olasBack {
background-image: url("https://i.imgur.com/e1DVYvt.png");
position: absolute;
width: 80vw;
height: 14vw;
z-index: 1;
bottom: -9vw;
left: -2vw;
animation: olas-back 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
background-size:4vw auto;
}
.bote {
background-image: url("https://i.imgur.com/Fk4CUZp.png");
position: relative;
z-index: 2;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size:13vw auto;
bottom: -7.6vw;
animation: barco 2s linear, barco-balanceo 2s linear infinite;
}
#interrogacion {
background-image: url("https://i.imgur.com/1g1A4sx.png");
width: 100%;
height: 100%;
position: relative;
background-repeat: no-repeat;
background-size:1vw auto;
margin-left: 10vw;
bottom: 1.5vw;
opacity: 0;
animation: 2s interrogacion 2s linear;
animation-fill-mode: forwards;
}
#keyframes olas-front {
0% {left: -1vw;bottom: -9vw;}
50% {left: 0vw;bottom: -8.7vw;}
100% {left: -1vw;bottom: -9vw;}
}
#keyframes olas-back {
0% {left: -2vw; bottom: -9vw;}
50% {left: -3vw;bottom: -8.7vw;}
100% {left: -2vw;bottom: -9vw;}
}
#keyframes barco {
0% {left: -7vw;}
100% {left: 0vw;}
}
#keyframes barco-balanceo {
0% {bottom: -7.6vw;}
50% {bottom: -7.9vw;}
100% {bottom: -7.6vw;}
}
#keyframes interrogacion {
from {opacity: 0;}
to {opacity: 1;}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="fondo"> <!-- background sky -->
<div class="olasFront"></div> <!-- Frontal waves -->
<div class="bote"> <!-- boat -->
<div id="interrogacion"> <!-- question mark -->
</div>
</div>
<div class="olasBack"></div> <!-- back waves -->
</div>
</body>
</html>
I make image fixed size. Try resize with codepen
body {
background-image: url("https://i.imgur.com/I6ixFFG.jpg");
}
.fondo {
background-image: url("https://i.imgur.com/UAq0obS.png");
width: 50vw;
height: 30vw;
min-height: 250px;
background-size: cover;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.olasFront {
background-image: url("https://i.imgur.com/w5yrlLy.png");
position: absolute;
width: 120%;
height: 75px;
z-index: 3;
bottom: -6%;
left: -3%;
animation: olas-front 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
}
.olasBack {
background-image: url("https://i.imgur.com/e1DVYvt.png");
position: absolute;
width: 100%;
width: 120%;
height: 75px;
z-index: 1;
bottom: 0;
left: -2%;
animation: olas-back 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
}
.bote {
background-image: url("https://i.imgur.com/Fk4CUZp.png");
position: absolute;
z-index: 2;
height: 215px;
width: 100%;
background-repeat: no-repeat;
bottom: -10%;
animation: barco 2s linear, barco-balanceo 2s linear infinite;
}
#interrogacion {
background-image: url("https://i.imgur.com/1g1A4sx.png");
width: 50px;
height: 50px;
position: absolute;
background-repeat: no-repeat;
top: -30px;
left: 190px;
opacity: 0;
animation: 2s interrogacion 2s linear;
animation-fill-mode: forwards;
}
#keyframes olas-front {
0% { left: -3%; }
50% { left: 0; }
100% { left: -3%; }
}
#keyframes olas-back {
0% { left: -2%; }
50% { left: -5%; }
100% { left: -2%; }
}
#keyframes barco {
0% { left: -7vw; }
100% { left: 0vw; }
}
#keyframes barco-balanceo {
0% { bottom: -10%;}
50% { bottom: -12%; }
100% { bottom: -10%; }
}
#keyframes interrogacion {
from { opacity: 0; }
to { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="fondo">
<div class="olasFront"></div>
<div class="bote">
<div id="interrogacion">
</div>
</div>
<div class="olasBack"></div>
</div>
</body>
<!-- Frontal waves -->
</html>
I think you need to use media query as per your width changes
/* If screen size is 1050px wide, or less*/
#media screen and (max-width: 1050px) {
#interrogacion{
margin-left: 20vw;
bottom : 1.8vw;
//change your css as per requirenment
}
}