1

Header отлично подгоняется под все экраны, а content и его картинки ни в какую. В чем ошибка?

Страничка при развернутом браузере https://i.stack.imgur.com/bCryR.jpg
Страничка при измененном размере браузера https://i.stack.imgur.com/oN3aP.png
Как видно, header отлично работает, но content и его картинки - ужасно.

Код html

Cosmologia.Ru

<body>

    <div id="wrapper">
        <div id="header">
            <img src="img/header.png" id="img_responsive">
        </div>
        <div id="content">
            <div class="inner_wrap">
                <img class="category" src="img/comets.png">
                <img class="category" src="img/planets.png">
                <img class="category" src="img/star.png">
                <img class="category" src="img/comets.png">
                <img class="category" src="img/planets.png">
                <img class="category" src="img/star.png">
                <img class="category" src="img/comets.png">
                <img class="category" src="img/planets.png">
                <img class="category" src="img/star.png">
            </div>
        </div>
    </div>

</body>

Код CSS

#wrapper{
  min-height: 100%;
  position: relative;
}

#img_responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

.inner_wrap{
  max-width: 1200px;
  margin: 0 auto;
}

#content{
  margin: auto;
  height: auto;
  background: url(img/content_maket.png) no-repeat; /* Добавляем фон */
  background-size: cover; /* Масштабируем фон */
}

.category{
  margin-left: 9px;
  margin-top: 23px;
}

body{
  margin: 0;
}
2
  • прочитайте про css media queries 30 сен 2016 в 19:06
  • Как по-вашему должно все работать не ужасно
    – user31906
    30 сен 2016 в 19:11

1 ответ 1

1

Укажите размеры в %, а не в статичных пикселях. Например:

.inner_wrap{
  max-width: 20%;
  margin: 0 auto;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.