Адаптивный код

Через css https://support.google.com/adsense/answer/6307124

Получается

<style>

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

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

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

</style>

вставляем в файл CSS, а это:

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

<!-- example_responsive_1 -->

<ins class="adsbygoogle example_responsive_1"

style="display:inline-block"

data-ad-client="ca-pub-XXXXXXX11XXX9"

data-ad-slot="8XXXXX1"></ins>

<script>

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

</script>

уже в то место, где хотим видеть рекламу?

Да. Если хочется совсем красиво, то вот здесь инструкция как полностью разделить всё на css, html и js: http://shostak.ru/adsense. Не забудте только правильно прописать идентификаторы.

Что-то не понимаю.

Добавляю в CSS:

<style>

.Реклама { width: 336px; height: 280px; }

@media(min-width: 600px) { .Реклама { width: 580px; height: 400px; } }

@media(min-width: 800px) { .Реклама { width: 580px; height: 400px; } }

</style>

Вставляю в нужное место:

<p style="text-align: center;"><script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script>

<!-- Реклама -->

<ins class="adsbygoogle Реклама"

style="display:inline-block"

data-ad-client="ca-pub-71986011941195XX"

data-ad-slot="69508505XX"></ins>

<script>

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

</script></p>

Ничего не показываю.

Но стоит скопировать код с Адсенсе:

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

<!-- Реклама -->

<ins class="adsbygoogle" style="display: block;" data-ad-client="ca-pub-71986011941195XX" data-ad-slot="69508505XX" data-ad-format="auto"></ins>

<script>// <![CDATA[ (adsbygoogle = window.adsbygoogle || []).push({});

// ]]></script>

все работает.

Что я делаю не так?

(.Реклама { width: 336px; height: 280px; })

А разве в css уже можно русскими буквами классы прописывать?

По инструкции так:

"Замените все экземпляры example_responsive_1 названием своего рекламного блока. Вместо пробелов используйте символ подчеркивания "_", например Главная_страница."

Подскажите, пожалуйста, знатоки CSS

А можно ли и как для разных экранов показывать коды разных рекламных сетей,

Конкретно интересует такой пример, хочу показывать рекламу не от гугла для размеров экрана больше 619, а для размеров экрана меньше 619(с 618) код адсенса, как это правильно организовать?

Вот как это делается для примера такого:

<style type="text/css">

.header{width:970px;height:250px;display:inline-block}

@media (min-width:765px) and (max-width:1034px){.header{width:729px;height:90px}}

@media (min-width:619px) and (max-width:764px){.header{width:336px;height:280px}}

@media (min-width:360px) and (max-width:618px){.header{width:300px;height:250px}}

@media (max-width:359px){.header{width:300px;height:250px}}

</style>

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

<ins class="adsbygoogle header"

style="display:inline-block"

data-ad-client="ca-pub-XXXX"

data-ad-slot="XXXX"></ins>

<script>

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

</script>

И есть код от другой сетки:

<div id="header2"></div>

<script type="text/javascript" src="//reklama.php"></script>

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

 #header2 {

 display:block;

 }

#header1 {

display:none;

}

@media screen and (min-width: 619px) {

 #header1 {

 display:block;

 }

#header2 {

display:none;

}

}

<div id="header1">показываюсь при более или равно 619px</div>

<div id="header2">показываюсь при менее 619px</div>

Это единый код, его надо вставлять полностью, а css вообще трогать не нужно. Прямо так вставлять:

<style>

.Реклама { width: 336px; height: 280px; }

@media(min-width: 600px) { .Реклама { width: 580px; height: 400px; } }

@media(min-width: 800px) { .Реклама { width: 580px; height: 400px; } }

</style>

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

<!-- Реклама -->

<ins class="adsbygoogle Реклама"

style="display:inline-block"

data-ad-client="ca-pub-71986011941195XX"

data-ad-slot="69508505XX"></ins>

<script>

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

</script>

Центр добавить по желанию.

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

P.S. Это действительно работает с русским языком?

<style>

.Реклама {...}

</style>