Один блок налезает на другой (адаптивная верстка)

Не. Ошибка, и ошибка первая - высоты для всех блоков контента. Вы задаете их фиксированно. Это неверно.

Необходимо задавать в процентах. Иначе как при сжатии экрана контент будет вытягиваться в рамках своего блока?

Т.е. для данной блока будет верным:

.content {

float: left;

height: 100%;

}

Следите за высотами, проценты не только для адаптива но и в базе.

Соответственно, лучше сразу привыкайте следить за шириной, тоже в процентах лучше.

Ну и второй косяк: у вас дублируются классы в стилях, тот же .content да и другие. Когда правите свой style.css, то лучше делайте 10 копий файла, и меняйте их, проверяя какой лучше. А теперь придется весь файл чистить.

Третье, что сразу бросается в глаза - размеры экранов в адаптиве, т.е. т.н. точки слома. У вас слишком с мелкого начинается.

ctrl+shift+M в том же firefox и чекайте основные разрешения, точки слома.

Еще что-то с центровкой самого сайта вроде, но я смотрю на 1920х1080, может туплю :)

Сам сайт симпотичный, для учебы удобен.

З.Ы. Следите за чистотой кода и копиями файла стилей, если надо в notepad++ сами себе с пометками /**/ вносите правки и дату/время.

Сегодня поделал, сохранил, завтра вечером продолжил и час разбираешься что и куда менял - воротил.

Привыкайте работать сразу чисто. Удачи!

У меня такое же разрешение, с центровкой все хорошо. Можете скрин выслать?

И центровка же банальная:

margin: 0 auto;

Можно подробней?

Так и нужно же дублировать если Вы про адаптив? По сути не трогая html меняем CSS под мобильные.

Я продвинутый начинающий :)

GIT + PhpStorm

выше уже написали

https://yadi.sk/i/_i7T_2Ys38qNDw

Ага, понял, спасибо :)

Я что-то затупил, забываю переопределить стили.

Так как первый адаптивный шаблон, но, на ошибках учатся, ради этого я верстаю эти шаблоны.

---------- Добавлено 13.01.2017 в 23:29 ----------

Кстати, понял в чем косяк с "неправильно отцентрировано". У меня min-width для хедера и футера стояло (!) 1900px, при том что враппер 1230px

Я на планшете открыл и чуть ли не офигел, сидел минут 10 не понимал почему margin: 0 auto; не срабатывает для враппера, ведь планшет не попадает под адаптив (и слава Богу, а то бывает такие сайты открываю на планшете, что одна буква на весь экран).

Konark, вы учитесь адаптивной верстки и позвольте дать вам совет.

Есть такой термин, как "mobile first".

Это означает, что вы верстаете первичную версию под самое мелкое разрешение экрана, которое вы планируете поддерживать.

А далее уже добавляете стили для других разрешений экрана - планшет, компьютер, широкий формат.

Добавить дополнительные стили для компьютера (например, закрепить сайдбар справа), намного проще, чем делать эти действия в обратном порядке.

Пользователи запрашивающие ваш сайт через мобильные телефоны, склоны больше всех иметь медленное подключение (EDGE, 3G).

Мобильные телефоны, просто не могут подгружать и парсить еще 20 килобайт стилей, для корректной отрисовки страницы.

Согласно методики "mobile-first", стили для разрешений экранов больше, чем мобильные телефоны, вы вставляете с атрибутом media="(min-width: 640px)" (например).

Соответственно, мобильные телефоны не будут скачивать эти дополнительные стили, которые им никогда не понадобятся - это сохранит время на загрузку файлов, парсинг CSS, в результате более быстрое отображение страницы, экономия трафика и заряда батареи.

Также, браузеры и боты, которые не поддерживаю Media Queries, будут получать самую упрощенную версию сайта - возможность ошибок в отображении сводиться к минимуму.

Googlebot Mobile, тоже не будет получать эти дополнительные стили, как в результате, быстрее будет получать ваши страницы - плюс для ранжирования, а также экономия ресурсов сервера.