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

Question

[Дмитрий Филандор]

Всем привет!

Поставил баннер гугл, размер: 728-90

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

В цсс не силен, вот что хочу сделать:

@media only screen and   (max-device-width: 760px) {

   
    .pc-ad{
        
        padding-top: 7%;       
    }

     .mob-ad{display:none;}  

}

@media screen and (max-width: 760px) { 

     .pc-ad{
        
        display:none;
    }   

    
}

и соответственно место показа гугл рекламы:

<div class="pc-ad">

            десктоп
        </div>


        <div class="mob-ad">

            мобила
        </div>

смысл в том, на всех экранах ширина которых больше 760 отображался pc-ad блок, а mob-ad скрывался, а на экранах меньше 760 десктоп скрывался, моб отображался

Comments

[Ankhena]

Ну так min и max правильно напишите. Ну или порядок следования правил.

[Дмитрий Филандор]

Ankhena W: если бы знал как правильно - не создавал вопрос). Покажите пжлста как правилно

[Ankhena]

Дмитрий Куликов: Я не вижу всего вашего кода, по этому не знаю, в каком порядке Вы пишете правила, mobile first или наоборот.
Вы пишете:

@media only screen and   (max-device-width: 760px) {}

Использовать правила на устройствах с шириной экрана до 760 точек.
@media screen and (max-width: 760px) {
Эти правила использовать при ширине браузера до 760 точек.

Т.е. оба правила срабатывают для маленьких утройств.

Надо написать либо разные диапазоны, либо использовать min и max, либо (как обычно поступают) написать сначала общие правила, ниже диапазоны с исключениями (либо по убыванию либо повозрастанию в зависимости от ответа на первое предложение).

[Ankhena]

Дмитрий Куликов: Пример https://jsfiddle.net/m9r1x0kr/

[Дмитрий Филандор]

Ankhena W: спасибо, вот ключ "в каком порядке Вы" - у меня оказывается в стилях уже есть медиазапросы и похожу это все конфликтовало.

[Дмитрий Филандор]

Ankhena W: спасибо, напишите ответ, выберу решением

Answer 1

[Anton Denisenko]

Здравствуйте, хорошая альтернатива размерам 320 x 50 и 300 x 250.