I have this website: link , when scrolling the bottle stays in the same place. But, I want the bottle to go up to 100px in the mobile version when scrolling.
[! [enter the description of the image here] [1]] [1]
HTML and CSS code
<!DOCTYPE html>
<html lang="es">
<meta charset=utf-8>
<head>
<meta http-equiv=”Refresh” content=”0;URL=https://damadorada.cl”>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Damadorada</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Damadorada.cl">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400" rel="stylesheet">
</head>
<body>
<div class="row">
<img class="logo movil" src="damadorada-cl.png" alt="damadorada" />
<div class="columna">
<span class="pc"><img class="logo" src="damadorada-cl.png" alt="damadorada" />
<p> </p></span>
<div class="parrafo">
<p>Acabas de tomar en tus manos lo que serán los mejores momentos junto a tu familia y amigos, amenizado por este vino de dulce y equilibrada expresión, pensado especialmente para ellas y un fiel aliado de los hombres ya que logra las atmósferas perfectas de romance y tranquilidad acompañado de buena música.</p>
</p>Es un vino joven nacido y criado en los perfectos valles de Curicó. Sus notas dulces y delicadas lo hacen un compañero ideal para quienes cultivan el arte y de inspiración.</p>
<p> </p>
<p>
<i class="fa fa-facebook"></i> <a href="#">Facebook</a><br>
<i class="fa fa-envelope"></i> <a href="mailto:[email protected]">Email</a>
</p>
</div>
</div>
<div class="columnb botella">
<p></p>
</div>
</div>
<footer>
<sup><a href="https://multicore.cl/" target="_blank">Multicore.cl</a> - Diseño Web y más!</sup>
</footer>
</body>
</html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
background-image: url("fondo.jpg");
background-position: top center;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
line-height: 1.6;
/*overflow-x: hidden;
margin: 0;*/
color: #fff;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
margin-top: 0px;
margin-bottom: 20px;
color: #10161A;
}
h1 {
font-size: 54px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
a {
color: gold;
text-decoration: none;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
}
a:hover, a:focus {
text-decoration: none;
outline: none;
opacity: 0.8;
color: #fff;
}
.fa {color:gold}
.parrafo {
margin: 0px 70px 100px 450px;
background-color: #0009;
padding:10px;
}
.logo {
margin: 50px 50px 20px 30px;
}
.botella {
background-image: url("damadorada-botella.png");
background-repeat: no-repeat;
position:fixed;
top:0;
right:0;
width:148px;
height:600px;
margin-top:40px;
}
.main-color {
color: #333;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.columna {
float: left;
width:60%;
}
.columnb {
float: left;
width:40%;
}
@media (min-device-width: 700px) and (max-device-width: 1900px) {
.movil {display: none;}
}
@media (max-width:1300px) {
.logo{width:100%}
.parrafo {margin: 0px 70px 100px 20%;}
}
@media (max-width:700px) {
.logo{width:84%;margin:50px 0px 0px 25px;}
.parrafo {margin: 50px 10px 100px 10px;}
body {background-size:contain;}
/*.movil {
display: inline;
}*/
.pc {
display: none;
}
.botella {
margin-top:120px; /*Elemento a ajustar*/
}
}
</style>
[1]: https://i.stack.imgur.com/LBUkd.png