Как правильно сделать адаптивный блок?

А, понял, спасибо.

Раньше, если не ошибаюсь, стили нужно было прописывать через css. Сейчас, получается, нужно использовать только сам код блока?

Да, реклама адсенса сама подстраивается по текущую ширину блока.

Теперь в css надо -прописать ширину , высоту куда будет вставляться.

Например 100% и будет автоматом баннер подбираться.

Это понятно. В коде есть возможность регулировать размер блоков для различных экранов - и это понятно. Я имел в виду, что раньше надо было отдельно в файл style.css прописывать параметры, но могу ошибаться.

Как в этом коде добавить автоматический подбор блоков, допустим, для экранов до 500 пикселей, оставив для мониторов фиксированный размер блока?

<style type="text/css">

.adslot_1 { width: 320px; height: 100px; }

@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }

@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }

</style>

Или здесь только фиксированный размер можно задать?

ТС держи

<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script>

<script>

if(document.getElementsByTagName("body")[0].offsetWidth>=900) {

document.write('<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-6345889*******" data-ad-slot="625*****"></ins>');

}else{

document.write('<ins class="adsbygoogle" style="display:block; width: 100%;" data-ad-client="ca-pub-6345889*******" data-ad-slot="149****" data-ad-format="rectangle"></ins>');

}

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

Просто и легко с пк и планшетов будет вылазить блок 336 на 280, со смартфонов адаптивный.

data-ad-slot="625*****" и data-ad-slot="149****" - что сюда вставлять вместо звезд?

data-ad-client="ca-pub-6345889*******" - тут понял что номер свой издателя

И где здесь в коде цвет изменить заголовка, текста и ссылки?

Я в этом далекий человек )

Номер блока.

Да.

Через лк адсенса, как и всегда.

Оооо, спасибо парни! Вроде работает - зашел с мобилы растянут норм на весь экран а с компа прямоугольник. Номер блока в примере выше разный почему то со звездами, я вставил одинаковый так как блок же один. Этот баннер у меня стоит один сразу под заголовком.

Теперь интересно как сделать снизу под статьей (будет посложнее) - там в ряд у меня 2 прямоугольника больших стоят. Заходя с мобилы они слева в столбец отображаются сейчас один под другим. Честно говоря даже не знаю как сделать чтобы более эффективнее они с мобилы были и смотрелись.

Посмотрим теперь какая разница в верхнем будет - пока вижу что хуже обстановка на 1000 показов у адаптивного.

Можно оффтопный вопрос?

Есть сайт с адаптивной версткой, 2 сайдбара по бокам скрываются.

По центру сверху и снизу 2 баннера 320х280

Есть ли смысл менять на адаптивные?

Может они какие-то преимущества имеют?

Ну там видео-баннеры, расхлапывающиеся и т.д. ???

О_о, спасибо Макеро за предложение, надо попробовать Ваш вариант.

Да не за что) у меня просто дизайн мобильной версии сайта специфический по этому я для больших облоков для пк использую одно объявление с одним стилем оформления(шрифт цвет и тд). А для адаптивного другой.

По этому номер блока и разный.

Забавно. Я не один такой умный похоже :)

Кстати, тестирую сейчас просто вариант со стандартным AUTO в блоке вместо rectangle из этого кода. Удивительно, но вполне неплохо по общему доходу, хоть и смотрится не так классно. Но это пока только недельный тест.