serega270112 22 Posted July 31, 2015 Report Share Posted July 31, 2015 У меня на сайте стоит адаптивный дизайн, из за этого, если посетитель заходит с устройства чье разрешение меньше 960px в ширину пропадает сайдбар, а на нем у меня стоит большая часть рекламы. Сегодня проверил, оказывается таких посетителей 30-35% и они практически не монетизируются. Как сделать так, чтобы при разрешение <960px показывалась реклама под изображением к посту, а при большем пропадала? Может есть скрипт какой? Как пример, сделано тут: (если уменьшить окошко браузера появляется реклама под картинкой) http://www.cluber.com.ua/lifestyle/lichnaya-zhizn/2015/07/nauchnyiy-sposob-sohranit-lyubov-garantiya-100/ Link to post Share on other sites
LetSevI 322 Posted July 31, 2015 Report Share Posted July 31, 2015 У Вас Bootstrap? Link to post Share on other sites
happy_patron 32 Posted July 31, 2015 Report Share Posted July 31, 2015 div блок со скриптом рекламы и @media запрос на разрешение до какого показывать, а после какого не показывать. css ---------> @media screen and (min-width: 960px) { .block_rekl {display:none} } html -----> <div class="block_rekl">код рекламы</div> Link to post Share on other sites
Pro100Fun 852 Posted July 31, 2015 Report Share Posted July 31, 2015 Как и обычно, ставим код баннер в html, делаем для него класс <div class="reklama"></div> @media only screen and (max-width: 960px) { .reklama {margin: 0;}} Здесь прописываем стили для класс, когда разрешение менее 960пх, @media only screen and (max-width: 1000px) { .reklama {display: none;}} А тут прописать для этого класса display: none Если я не ошибаюсь) Link to post Share on other sites
happy_patron 32 Posted July 31, 2015 Report Share Posted July 31, 2015 Как и обычно, ставим код баннер в html, делаем для него класс <div class="reklama"></div> Здесь прописываем стили для класс, когда разрешение менее 960пх, А тут прописать для этого класса display: none Если я не ошибаюсь) max-width не подходит Один раз написать мин-видс и разрешение, и будет пропадать. А там как хочет чтоб выглядел - просто css пусть делает. вот пример - https://jsfiddle.net/0nja2pfm/- йорзайте окно "РЕСУЛЬТ" Link to post Share on other sites
rafonets 508 Posted July 31, 2015 Report Share Posted July 31, 2015 В CSS: .ads { display: none; } @media(max-width: 960px) { .ads {display: block;} } После картинки: <div class="ads"> код рекламы </div> serega270112 1 Link to post Share on other sites
Pro100Fun 852 Posted July 31, 2015 Report Share Posted July 31, 2015 max-width не подходит Один раз написать мин-видс и разрешение, и будет пропадать. А там как хочет чтоб выглядел - просто css пусть делает. вот пример - https://jsfiddle.net/0nja2pfm/- йорзайте окно "РЕСУЛЬТ" Возможно) У меня просто на адаптивном наоборот пропадает баннер, когда меньше 960... То есть, там display: none; а при нижнем, который у меня написан класс, там стили заданы. Особо не задумывался, просто по подобию написал. Поэкспериментировать и будет результат) Link to post Share on other sites
rafonets 508 Posted July 31, 2015 Report Share Posted July 31, 2015 max-width не подходит Один раз написать мин-видс и разрешение, и будет пропадать. А там как хочет чтоб выглядел - просто css пусть делает. вот пример - https://jsfiddle.net/0nja2pfm/- йорзайте окно "РЕСУЛЬТ" Зачем screen ? из 30%, 20% устройств мобильные, screen == экран монитора. Для 10% реклама не будет видна, как минимум. А может и для всех 30%. Link to post Share on other sites
rafonets 508 Posted July 31, 2015 Report Share Posted July 31, 2015 ... Link to post Share on other sites
serega270112 22 Posted July 31, 2015 Author Report Share Posted July 31, 2015 Читайте сообщение, ТС! Вы все предлагаете вариант, работающий наоборот. Спасибо, поставил все работает) rafonets 1 Link to post Share on other sites
rafonets 508 Posted July 31, 2015 Report Share Posted July 31, 2015 Спасибо, поставил все работает) Не за что). Link to post Share on other sites
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now