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

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;
    }
}