Witam pod adresem http://brainattach.com/ znajduje sie stworzona przeze mnie strona internetowa. Na monitorze wygląd tak jak ma wyglądać ale na wąskich ekranach ucina zdjęcia i wyswietla się pół strony. Czym moze to być spowodowane?
kod scss
@import url('reset.css');
html{
font-size: 10px;
font-family: 'Roboto', sans-serif;
}
h2, h1{
font-size: 3.3rem;
margin: 2rem;
}
section{
min-height: 100vh;
}
nav{
z-index: 4;
margin-bottom: -7vh;
min-height: 20vh;
position: sticky;
top: 0;
overflow: hidden;
background:linear-gradient(to top, transparent, gray);
display: flex;
a{
height: 5vh;
font-size: 3.5rem;
text-decoration: none;
color: black;
margin: 3vh;
border-bottom: 2px solid #00A06A;
}a:hover{
font-size: 3.7rem;
border-bottom: 5px solid #00A06A;
}
}
#burgerMenu{
background: url(img/menu-128.png);
height: 128px;
width: 128px;
display: none;
}
#logo{
margin: 3vh;
background: url(img/logo5.png) right no-repeat;
height: 109px;
width: 181px;
flex-grow: 3;
align-self:center;
}
#top{
background:linear-gradient(to left, transparent, white 70%),url(img/opaska1.jpg) top right no-repeat ;
}
#toTop:hover{
opacity: 0.9;
}
#toTop{
background-color: #00A06A;
height: 10vh;
width: 10vh;
font-size: 5rem;
opacity: 0.3;
z-index: 10;
position: fixed;
border: 1px solid #e0dcdc;
border-radius: 8px;
bottom: 5vh;
right: 5vh;
text-align: center;
a{
color: #562B45;
text-decoration: none;
display: block;
padding: 15px;
}
}
#holderTwo{
background:linear-gradient(to right, transparent, white 85%),
url(img/opaska2.jpg) top left no-repeat ;
}
#holderThree{
background:linear-gradient(to left, transparent, white 85%),
url(img/pudelko.jpg) top right no-repeat ;
}
#holderfour{
background:linear-gradient(transparent, black);
}
.container{
display: flex;
}
.content{
letter-spacing: 0.15rem;
font-size: 1.8em;
line-height: 2rem
}
#btContent{
width: 65vh;
margin: 10vh;
}
#algContent{
width: 65vh;
margin: 10vh;
margin-right: 15vh;
align-self: flex-end;
}
#videoOne{
align-self: center;
}
#deviceContent{
width: 65vh;
margin: 10vh;
}
form{
margin: 3rem auto;
font-family: sans-serif;
input:nth-of-type(1){
border-radius: 0.2rem;
font-family: sans-serif;
padding: 0.8rem;
border: 1px solid #aaa;
color: #666;
margin-bottom: 1rem;
min-width: 189px;
}
#mess{
border-radius: 0.2rem;
font-family: sans-serif;
padding: 0.8rem;
border: 1px solid #aaa;
width: 60vh;
height: 30vh;
color: #666;
}
}
#formContent{
position: relative;
margin: 0 auto;
margin-top: 40vh;
height: 70vh;
min-width: 60vh;
}
#result{
opacity: 0;
padding: 0.4rem;
display: inline-block;
position: absolute;
top: 8%;
left: 50%;
text-align: center;
}
#buttonDiv{
position: absolute;
top: 60%;
left: 23%;
}
@media only screen and (max-width:1000px){
#top{
background: linear-gradient(to bottom, white,transparent 120%),url(img/opaska1mobile.jpg) bottom no-repeat ;
height: 200vh;
width: 100vh;
}
#holderTwo{
background:linear-gradient(to bottom, white, transparent 120%),
url(img/opaska2mobile.jpg) bottom no-repeat ;
}
#holderThree{
background:linear-gradient(to bottom, white,transparent 85%),
url(img/pudelko.jpg) bottom no-repeat ;
height: 150vh;
}
.container{
display: flex;
justify-content: center;
}
#flexEnd{
justify-content: flex-start;
flex-direction: column;
}
#btContent{
width: 65vh;
margin: 10vh;
}
#algContent{
width: 65vh;
margin: 10vh;
margin-right: 15vh;
}
#videoOne{
align-self: center;
}
#deviceContent{
width: 65vh;
margin: 10vh;
}
nav{
position: static;
align-items: center;
margin: 0;
display: flex;
flex-direction: column;
width: 100vh;
}
#burgerMenu{
z-index: 4;
display: block;
}
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Brainattach</title>
</head>
<body>
<nav>
<a href="#top">Brainattach</a>
<a href="#holderTwo">Algorithm</a>
<a href="#holderThree">The Device</a>
<a href="#holderFour">Contact</a>
<div id="logo"></div>
</nav>
<section id='top'>
<div id='burgerMenu'></div>
<div class="container">
<div class='content' id="btContent">
<h1>Brainattach</h1>
<p>BrainAttach has a straightword and simple mission - to create a high quality and cheap EEG tool in the form a wearable device that could convert brain activity into a clear and visible emotional state that is easily viewable. This would allow the wearer to use the device as a video game controller. Futhermore it could also be used by professional video game players (and those who want to jump into the role of a professional player) and their coaches to increase their skills levels, to develop focus and concentration - traits that are integral to victory as a pro player. What if you produce videos that use game footage as their basis? No problem! Our device is also useful in this aspect - it allows the producer, in a quick and precise fashion, to choose the moments where the emotional engagement of the player is either high or low. </p>
</div>
</div>
<div id="toTop"><a href="#top">^</a></div>
</section>
<section id='holderTwo'>
<div class="container" id="flexEnd">
<div class='content' id="algContent">
<h2>Algorithm</h2>
<p>The algorithms that we have been developing for six years allow us to indicate whether or not someone has seen the material, but how he reacted to each piece of material, how he reacted the first time and how to return to it later or depending on the mood. The amount of information our method receives from individual interactions exceeds the amount of information that can be collected by current methods. We also put strong emphasis on the precision of the data provided. Our current reccomendation algorithms are made to work with even the most granular of data and as such can learn much faster and better than currently existing methods. This also includes adapting to the current emotional state of the user. What is most important of all is the fact that this data may be used in almost any industry or for any brand.</p>
</div>
<div id="videoOne"><iframe width="560" height="315" src="https://www.youtube.com/embed/9pUOg8e8KCI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
</div>
</section>
<section id='holderThree'>
<div class="container">
<div class='content' id="deviceContent">
<h2>The Device</h2>
<p>
Our product is a device in the form of a headband that is placed on the back of the user’s head. The device then converts the EEG signal to a readable and usable view of the emotional status of the user. What is important is the fact that this is all done in real time. At the time of making it available to the market, it will allow monitoring the focus and emotional state as well as activities in the field of biofeedback. The device software will be equipped with an open API, allowing developers to create new applications. This allows for a wide variety of applications that are able to support various different aspects of the data provided by the device. It will also be possible to cooperate with a partner company that will facilitate the adaptation of the device to the client's games / programs. This company can also help with app development and other software related issues.</p>
</div>
</div>
</section>
<section id="holderFour">
<div class="container">
<div class='content' id="formContent">
<p>Contact with us</p>
<form action="mail.php" method="get">
<input type="text" name="mail" value="E-mail">
<textarea name="mess" id="mess" cols="1000" rows="10"></textarea>
<div id="buttonDiv"><br>
<input type="submit" value="send" class="button" id="buttonMark" disabled >
</div>
</form>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery-ui.js"></script>
<script src="js.js"></script>
</body>
</html>