Ответные гибкие изображения не работают

Question

Я пытаюсь сделать свой сайт отзывчивым. Я нашел на этом сайте (http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/), что для того, чтобы сделать изображения гибкими, вы должны использовать max-width: 100%.

Что я сделал на своем сайте (http://riksblog.com/Marnik/index.html) для # promo1img (первое изображение iphone), но, как вы можете видеть, он не работает должным образом.

Какие css-стили мне не хватает?

Answer 1

Изменить section.first класс ниже: (строка 110, в Stijl файле CSS):

padding: 0; 
    margin: 0; 
    position: relative; 
    width: 100%; 
    height: auto; 
    color: white; 
    text-align: center; 
    background-image: url(../img/header.jpg); 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 

Приведенный выше код фиксирует фон изображение обложки.

Теперь в html есть другие элементы, которые не реагируют. Поэтому для тех, добавьте эти коды в свой css:

@media screen and (max-width: 480px){ 
    #contactemailp{ 
     margin-left:0px; 
    } 
    section.first .section-content .section-content-inner h1 { 
     font-size: 40px; 
    } 
}