Неверный отзывчивый взгляд на мой сайт

Question

Я столкнулся с проблемой с моим отзывчивым сайтом.

Моя .bottom часть в отзывчивом виде странно «прыгает» вперед и назад.

Вот что я имею в виду. Рисунок 1 и теперь изображение 2. Следует упомянуть, что только вещь, которая была изменена, была шириной окна.

Изображение 1

Изображение 2

Underneath вы можете найти код для этой страницы, как HTML и CSS

@font-face { 
 
    font-family: 'MontserratFont'; 
 
    src: local('☺'), src: url('../fonts/Montserrat-Regular.ttf') format('truetype'), src: url('fonts/Montserrat-Regular.otf') format('opentype'), src: url('/fonts/Montserrat-Regular.woff') format('woff'), src: url('/fonts/Montserrat-Regular.eot') format('embedded-opentype'); 
 
    src: url('/fonts/Montserrat-Regular.eot') format('embedded-opentype'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
} 
 

 
@font-face { 
 
    font-family: 'RalewayFont'; 
 
    src: local('☺'), src: url('../fonts/Raleway-Regular.ttf') format('truetype'), src: url('fonts/Raleway-Regular.otf') format('opentype'), src: url('/fonts/Raleway-Regular.eot') format('embedded-opentype'), src: url('fonts/Raleway-Regular.woff') format('woff'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
} 
 

 
body { 
 
    font-family: Helvetica, Arial; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
div.top { 
 
    width: 100%; 
 
} 
 

 
div.menu_box { 
 
    display: none; 
 
} 
 

 
div.banner { 
 
    width: 100%; 
 
    background: #000000; 
 
    height: 200px; 
 
} 
 

 
img.logo { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: auto; 
 
    z-index: 100; 
 
    line-height: 80%; 
 
    height: 80%; 
 
} 
 

 
ul.topnav { 
 
    font-family: 'Montserrat'; 
 
    font-weight: 150; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #000000; 
 
    position: fixed; 
 
    top: 0px; 
 
    z-index: 1; 
 
    width: 100%; 
 
} 
 

 
ul.topnav li { 
 
    float: left 
 
} 
 

 
ul.topnav li a { 
 
    display: inline-block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 15px; 
 
} 
 

 
ul.topnav li a:hover { 
 
    background-color: gray; 
 
} 
 

 
ul.topnav li.icon { 
 
    display: none; 
 
} 
 

 
div.mid { 
 
    width: 70%; 
 
    margin: auto; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    padding-bottom: 10px; 
 
} 
 

 
img.image { 
 
    -webkit-box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.18); 
 
    -moz-box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.18); 
 
    box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.18); 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
    margin-bottom: 10px; 
 
    float: left; 
 
} 
 

 
.header { 
 
    font-weight: 400; 
 
    font-family: 'MontserratFont' color:#2E16B1; 
 
} 
 

 
div.map { 
 
    float: right; 
 
    position: absolute; 
 
    top: 30%; 
 
    padding: 10px; 
 
    right: 0px; 
 
} 
 

 
hr { 
 
    border: 0; 
 
    height: 1px; 
 
    color: #000000; 
 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); 
 
} 
 

 
div.content_text { 
 
    margin: 0 5px 0 5px; 
 
    padding-right: 5px; 
 
} 
 

 
p.main_text { 
 
    font-family: 'MontserratFont'; 
 
    color: #2E16B1; 
 
    text-shadow: 1px 1px rgba(0, 0, 0, 0.1); 
 
    font-weight: 400; 
 
    font-size: larger; 
 
    font-variant: small-caps; 
 
} 
 

 
h4 { 
 
    font-family: 'MontserratFont'; 
 
    font-weight: 600; 
 
    font-size: larger; 
 
} 
 

 
p.text { 
 
    position: relative; 
 
    font-family: 'RalewayFont'; 
 
    text-align: justify; 
 
    float: left; 
 
    padding-bottom: 10px; 
 
    font-weight: 100; 
 
    text-indent: 50px; 
 
} 
 

 
.bottom { 
 
    position: absolute; 
 
    top: 2200px; 
 
    width: 95.3%; 
 
    background-color: black; 
 
    padding: 30px; 
 
    color: white; 
 
    text-align: center; 
 
    font-family: 'RalewayFont'; 
 
    word-spacing: 40px; 
 
    font-weight: 100; 
 
} 
 

 
ul.bottom_list li { 
 
    display: inline-block; 
 
    bottom: 30px; 
 
} 
 

 
ul.bottom_list li a { 
 
    display: inline-block; 
 
    bottom: 30px; 
 
    border-right: solid; 
 
    border-color: gray; 
 
} 
 

 
a.bottom_list_item { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 

 
a.bottom_list_item:last-child { 
 
    border-right: none; 
 
} 
 

 
@media all and (max-width: 767px) { 
 
    div.all { 
 
    float: left; 
 
    width: 100%; 
 
    min-height: 350px; 
 
    background: #ffffff; 
 
    } 
 
    div.banner { 
 
    display: none; 
 
    } 
 
    ul.topnav { 
 
    position: relative 
 
    } 
 
    div.slider { 
 
    display: none; 
 
    } 
 
    audio { 
 
    display: none; 
 
    } 
 
    div.mid { 
 
    width: 100%; 
 
    padding-left: 0%; 
 
    padding-right: 0%; 
 
    } 
 
    .bottom { 
 
    position: absolute; 
 
    top: 2200px; 
 
    } 
 
}

<body> 
 
    <div id="all" class="all"> 
 
    <!-- TOP--> 
 
    <!-- TOP--> 
 
    <!-- TOP--> 
 
    <!-- TOP--> 
 
    <div id="top" class="top"> 
 
     <!--BANNER--> 
 
     <!--BANNER--> 
 
     <!--BANNER--> 
 
     <!--BANNER--> 
 
     <div id="banner" class="banner"> 
 

 
     <img class="logo" id="logo" src="../images/logo.png"> 
 
     <div id="menu_box" class="menu_box"> 
 

 
     </div> 
 
     </div> 
 

 
     <!--NAV--> 
 
     <!--NAV--> 
 
     <!--NAV--> 
 
     <!--NAV--> 
 
     <nav> 
 
     <ul class="topnav" id="myTopnav"> 
 
      <li> 
 
      <a class="menu" href="../index.html">AJ</a> 
 
      </li> 
 
      <li> 
 
      <a class="menu" href="ja.html">O mnie</a> 
 
      </li> 
 
      <li> 
 
      <a class="menu" href="#">Co robię?</a> 
 
      </li> 
 
      <li> 
 
      <a class="menu" href="kontakt.html">Kontakt</a> 
 
      </li> 
 

 
     </ul> 
 
     </nav> 
 
    </div> 
 

 
    <!--MIDDLE--> 
 
    <!--MIDDLE--> 
 
    <!--MIDDLE--> 
 
    <!--MIDDLE--> 
 
    <div id="mid" class="mid"> 
 

 
     <p class="main_text" style="font-size: 30px;"> 
 
     &nbsp;&nbsp; Czym się zajmuję? 
 
     </p> 
 
     <hr> 
 
     <h4> Tworzeniem i produkcją muzyki</h4> 
 
     <div class="soundcloud_feed" style="margin-left:150px;"> 
 
     <iframe width="80%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/264003796&amp;color=2e16b1&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe> 
 
     </div> 
 
     <p class="text" style="padding-bottom: 0px;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim, ante et imperdiet vehicula, leo ligula congue tortor, id tincidunt mi odio at neque. Quisque ut suscipit libero, at aliquet nibh. Suspendisse potenti. Aliquam facilisis, justo at 
 
     viverra blandit, lectus mauris lobortis diam, eget malesuada massa lorem egestas erat. Quisque tempus imperdiet posuere. Pellentesque sagittis vehicula orci ut cursus. Suspendisse elementum convallis mi, at tempor ex posuere ac. Cras a nibh porta, 
 
     finibus est vitae, pharetra dolor. Etiam sed leo tortor. Maecenas fermentum posuere lacus ut accumsan. Integer nisl odio, lacinia sit amet tellus et, euismod interdum urna. Etiam vehicula ante diam, quis rhoncus turpis convallis elementum. Curabitur 
 
     malesuada gravida lobortis. Praesent lorem velit, vulputate non est vel, faucibus dignissim quam. Maecenas leo purus, lacinia dictum nisl in, sodales interdum massa. Donec luctus dolor nec ante molestie, vitae imperdiet ipsum sagittis. Integer 
 
     tempus nulla et lorem accumsan mattis. Nullam lobortis eleifend venenatis. Sed vel velit neque. Nullam placerat magna ut mauris laoreet commodo. Suspendisse ac ante libero. Etiam eu faucibus magna. Phasellus eget sagittis tellus. Sed scelerisque 
 
     ultricies libero, at pharetra nulla hendrerit eu. 
 
     </p> 
 
     <hr> 
 

 
     <h4> Fotografowaniem i edycją zdjęć</h4> 
 

 
     <a style="margin-left:47.5%;display: inline-block; border: 0; text-decoration: none;" href="http://vsco.co/thenathurat?utm_source=user_grid&utm_medium=user_website&utm_campaign=link_to_grid"><img style="width: 48px; height: 48px; margin: 0px;" src="http://assets.vsco.co/assets/images/assets/Logo_black_48.png" alt="VSCO Logo" /></a> 
 
     <br> 
 
     <br> 
 
     <p class="text" style="padding-bottom: 5px;"> 
 

 
     Nam venenatis ligula sit amet orci dictum, non vestibulum nisi bibendum. Nam scelerisque dolor neque, id faucibus leo mattis quis. Pellentesque pretium accumsan cursus. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis 
 
     in faucibus. Fusce non condimentum dui, eu laoreet tellus. Nam eget ultrices massa, ut rhoncus sapien. Aliquam eget est vel eros commodo imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet quam sit amet felis rutrum 
 
     euismod. Vestibulum venenatis tincidunt neque id auctor. Cras sed quam tristique quam ultrices mattis vitae eu libero. Maecenas vitae justo quis nisl rutrum laoreet rutrum vitae nulla. Nunc hendrerit sed dui vel varius. Cras aliquet volutpat tincidunt. 
 
     Integer venenatis eleifend risus, ut venenatis dolor accumsan ut. Nulla imperdiet tempus ultricies. Donec porta felis et malesuada eleifend. Nunc commodo ex et consequat tincidunt. Aenean eu lacus ut libero malesuada auctor vel eu mi. Praesent 
 
     fringilla libero vel lorem ornare mattis. Nulla id purus metus. Vivamus ornare sodales ante ac suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. 
 
     </p> 
 
     <br> 
 
     <p class="text" style="padding-top: 0px;"> 
 
     Donec fringilla turpis non urna sollicitudin laoreet. Morbi ac ornare libero. Etiam rutrum condimentum pretium. Duis aliquam ipsum id metus vestibulum scelerisque. Aenean ac elementum felis. Curabitur ultricies porta ultricies. Cras maximus dolor tristique, 
 
     tristique nulla ac, placerat tortor. Suspendisse ultrices erat ultrices iaculis commodo. Duis maximus ipsum in turpis lacinia pretium. Pellentesque eleifend maximus tellus, a porta nibh venenatis nec. Nam viverra, mauris vitae feugiat auctor, 
 
     ex magna egestas odio, a dictum est lacus ut nibh. Vestibulum pellentesque tortor nibh, in ornare justo consequat in. Vestibulum ornare nec nibh a vulputate. Nullam lorem sapien, eleifend ut fermentum a, eleifend ut enim. Pellentesque et malesuada 
 
     lacus, nec condimentum mauris. Suspendisse sed velit turpis. Donec id dapibus erat. Maecenas convallis velit tincidunt nisi consectetur, non bibendum felis tincidunt. Cras pretium erat a dictum ornare. Curabitur nec velit non nibh suscipit hendrerit. 
 
     Donec sit amet dictum nisl, et facilisis velit. Cras mauris ipsum, fermentum quis massa sit amet, condimentum luctus massa. Nam lacinia, nulla tincidunt ullamcorper tincidunt, mi nibh posuere eros, in egestas mi mi eget diam. Cras non lectus pharetra, 
 
     ullamcorper erat ac, mattis lacus. Donec auctor, elit ac tempus blandit, nibh urna cursus erat, in congue tellus neque in justo. Fusce in gravida ligula. Nunc ullamcorper porta arcu ut viverra. Maecenas vitae odio convallis, convallis urna nec, 
 
     pharetra mauris. Sed ut facilisis augue. Nullam tincidunt posuere mauris, nec dapibus urna mattis vitae. Curabitur lacinia nisl vel elit varius rhoncus et non quam. Sed malesuada tortor sed neque molestie porta. Vivamus vehicula nibh vitae posuere 
 
     rutrum. Ut eu condimentum nunc, in laoreet ipsum. Donec at augue quis ipsum maximus malesuada. Sed eleifend varius lectus quis rhoncus. Curabitur dapibus eros sit amet nisi blandit tempus. Aliquam erat volutpat. Praesent commodo ipsum non nibh 
 
     dignissim, et pretium nisi varius. 
 
     </p> 
 
     <h4>Montażem filmów</h4> 
 

 
     <div class="vimeo" style="position:relative; margin-left: 12.5%; "> 
 
     <iframe src="https://player.vimeo.com/video/71013726?color=ffffff&byline=0&portrait=0" width="700" height="394" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 
     </div> 
 
     <br> 
 
     <p class="text" style="padding-bottom: 5px;"> 
 

 
     Nam venenatis ligula sit amet orci dictum, non vestibulum nisi bibendum. Nam scelerisque dolor neque, id faucibus leo mattis quis. Pellentesque pretium accumsan cursus. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis 
 
     in faucibus. Fusce non condimentum dui, eu laoreet tellus. Nam eget ultrices massa, ut rhoncus sapien. Aliquam eget est vel eros commodo imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet quam sit amet felis rutrum 
 
     euismod. Vestibulum venenatis tincidunt neque id auctor. Cras sed quam tristique quam ultrices mattis vitae eu libero. Maecenas vitae justo quis nisl rutrum laoreet rutrum vitae nulla. Nunc hendrerit sed dui vel varius. Cras aliquet volutpat tincidunt. 
 
     Integer venenatis eleifend risus, ut venenatis dolor accumsan ut. Nulla imperdiet tempus ultricies. Donec porta felis et malesuada eleifend. Nunc commodo ex et consequat tincidunt. Aenean eu lacus ut libero malesuada auctor vel eu mi. Praesent 
 
     fringilla libero vel lorem ornare mattis. Nulla id purus metus. Vivamus ornare sodales ante ac suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. 
 
     </p> 
 
     <br> 
 
    </div> 
 

 
    <div id="bottom" class="bottom" style="position:absolute;top:2200px;"> 
 

 
     <footer class="bottom_footer" id="bottom_footer"> 
 

 
     <ul class="bottom_list"> 
 
      <li style="word-spacing:1px; font-weight:400; font-family:'MontserratFont';"> 
 
      My social media accounts 
 
      </li> 
 
      <br> 
 
      <br> 
 
      <li> 
 
      <a class="bottom_list_item" href="https://twitter.com/AJWRSW">Twitter</a> 
 
      </li> 
 
      <li> 
 
      <a class="bottom_list_item" href="">FB</a> 
 
      </li> 
 
      <li> 
 
      <a class="bottom_list_item" href="http://vsco.co/thenathurat/">VSCO</a> 
 
      </li> 
 

 
     </ul> 
 

 
     </footer> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Кроме того, границы не отображаются в нижнем списке. Я бегу по кругу, пытаясь это исправить.

Любые идеи?

EDIT:

Другое дело. Когда я меняю position:absolute на position:relative в .bottom `ul.bottom_list ', высота 1200px.

Answer 1

1. .vimeo - удалить в стиле атрибута = "маржа налево ...
2. IFRAME - с Vimeo видео, {ширина: 100%;}
3. .bottom {коробчатой ​​проклейки: пограничный ящик ;

Answer 2

Есть так много вещей, которые вы совершаете неправильно.

Могу ли я спросить, почему вы позиционировали .bottom сверху? было бы лучше, если бы вы расположили его снизу, как bottom: 0

Поскольку .bottom является абсолютным, должен быть относительный родитель, но я не вижу ни одного родительского элемента, определенного как относительный.

.all { 
    position: relative; 
} 

используйте этот код. и поскольку абсолютный элемент не будет принимать макет, попробуйте использовать padding для .all так, чтобы он нажимал .bottom и не перекрывал содержимое.

также есть элементы, которые вы использовали float, поэтому вам нужно будет использовать что-то вроде overflow: hidden; в родительском, чтобы получить правильную компоновку. Я попытался использовать его на .all, и он выглядит хорошо. Попробуй это.