Форум Монетизация сайтов Google AdSense

"Хитрые" блоки. Помогите с кодировкой

Foundd
На сайте с 29.03.2011
Offline
91
Foundd
749

Прошу помощи, в создании адаптивных рекламных блоков под конкретный "сценарий".

Такие блоки, были подсмотрены на одном иностранном сайте, хотелось бы попробовать их в деле! К сожалению, в кодированию блоков не силен, поэтому прошу помощи у вас, уважаемые профи.

Блок №1 (будет располагаться под заголовком)

Обратите внимание на этот блок! Для мобильных устройств высокого класса, он будет показывать объявления не превышающую высоту 200 пикселей, что по-идее, не противоречит правилам Adsense... По крайней мере, нигде не встречал инфу, что 200 пикселей запрещено! Что думаете об этом?

Сценарий:

- если ширина экрана меньше 505 пикселей, то высота блока 200 пикселей, а ширина с переменным значением от 200 до 500 пикселей.

- если ширина экрана равна, или больше 505 пикселей, то высота блока 280 пикселей, ширина с переменным значением от 336 до 728 пикселей.

Блок №2 (будет располагаться в конце статьи)

Сценарий:

- если ширина экрана меньше 276 пикселей, то высота блока 200 пикселей, а ширина с переменным значением от 200 до 275 пикселей.

- если ширина экрана от 276 до 364 пикселей, то высота блока 250 пикселей, а ширина с переменным значением от 276 до 336 пикселей

- если ширина экрана равна, или больше 365 пикселей, то высота блока 280 пикселей, ширина с переменным значением от 336 до 728 пикселей.

За оказанную помощь, буду искренне благодарен и, если потребуется, то материально тоже!

С уважением

D.iK.iJ
На сайте с 26.05.2013
Offline
229
D.iK.iJ
#1

#blok1 {max-height: 280px;}

@media screen and (max-width: 505px) {#blok1 {max-height: 200px;}}

#blok2 {max-height: 280px;}

@media screen and (max-width: 364px) {#blok2 {max-height: 250px;}}

@media screen and (max-width: 276px) {#blok2 {max-height: 200px;}}

Как-то так. Ну, если блоки обозначить id="blok1" и blok2.

Хотя, нужно смотреть. Может стоит заменить max-width на просто width.

Шрину особо указывать смысла не вижу - сам подберет. Но можно прописать min-width и max-width.

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
CSS (мобильная версия) Настройка блоков РСЯ Адаптивная верстка и мобильные
Foundd
На сайте с 29.03.2011
Offline
91
Foundd
#2

Андрей,большое спасибо за помощь! Похоже, это то что нужно!

Жму руку!

M
На сайте с 22.08.2016
Offline
39
mekling
#3

<style>

.tttttttt { width: 300px; height: 250px; }

@media(min-width: 500px) { .tttttttt { width: 336px; height: 280px; } }

@media(min-width: 800px) { .tttttttt { width: 336px; height: 280px; } }

</style>

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

<!-- tttttttt middle -->

<ins class="adsbygoogle tttttttt"

style="display:inline-block"

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

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

<script>

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

</script>

мне помогло, на форуме подкинули добрые люди..

Адаптивный код Блок с лишней скобкой Как так? Адаптивный блок

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий