Проблема при создании "Отзывчивого" шаблона

[ablay2009]

Здравствуйте! При переделывании шаблона для Wordpress , чтобы он был "отзывчивым"(Responsive на забугорском) столкнулся с такими проблемами:

1. При наличии в блоке больших картинок, он отказывается уменьшаться, но до определенного предела. Потом картинки сами начинают уменьшаться под размер блока (у них стоит max-width:100%).
   
2. Ширина блока с картинкой меньше, чем ширина такого же блока, но только с текстом.
   

Чтобы было понятнее вот ссылки на тестовый сайт:

1. Блок только с текстом - все работает нормально http://www.testground.itechblog.org/?p=358
   
2. Блоки с картинками - проблемные (уменьшайте окно браузера) http://www.testground.itechblog.org/?p=674 и http://www.testground.itechblog.org/?p=693
   

Надеюсь на помощь, т.к. самому ничего в голову не лезет.

[buddah]

"Отзывчивый" шаблон - это из ряда такой картинки.

Лучше говорить "адаптивный".

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

Edited February 5, 2012 by buddah

[ablay2009]

Лучше говорить "адаптивный".

Да, вы правы, просто слова не мог найти.

И кстати не я один такой - гугл переводчик пишет, что responsive переводится как "реагировать"

Вот скриншоты по сабжу:

Проблема:

Как надо:

Просто в первом случае(когда картинка есть) блок поста уже, чем надо(как в блоке только с текстом).

[buddah]

Вот что я вижу при уменьшении - нормальное поведение.

[ablay2009]

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

P.S. на моих скринах окно не уменьшено

UPD: проверил в хроме:

Тоже самое

Edited February 5, 2012 by ablay2009

[buddah]

В хроме проверял. Вы так закрутили вопрос, что я его совсем неправильно понял и подумал, что "дырка" остается при уменьшении окна.

На счет проблемы - у вас там float: left; То есть, если ширина не указана явно, то блок имеет ширину контента в нем. Соответственно текста много - блок растягивается, а на странице с картинкой блок принимает ту ширину, которая обёртывает картинку и хедер.

Много писать, мало делать - попробуйте убрать галочку float:left у section id ="content" в фаербаге или другом инструменте разработчика в вашем браузере и вы наглядно поймете причину такого поведения.

p.s. правильной дорогой идете, товарищ. Молодец.

Edited February 5, 2012 by buddah

[ablay2009]

Спасибо! Вы оказались правы насчет float, он у меня остался от предыдущего(не адаптивного) расположения и я про это совсем забыл. Ещё раз спасибо.