XF 1.5 Адаптивный рекламный баннер

[mercenary_chester]

Здравствуйте! Подскажите как сделать адаптивный баннер? Нашел инфо как сделать чтоб при мобильном виде не показывалось:

<div class="Banner">
Код баннера
</div>

<xen:if is="@enableResponsive">
@media (max-width:1000px)
{
    .Banner
    {
        display: none;
    }
}
</xen:if>

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

 

[Георгий Шевченко]

mercenary_chester, ну так и делайте в зависимости от размера ширины (размер баннера).

Как пример:

@media (max-width:480px) {
.Banner {
width: 100px;
height: 20px;
}}

 

[GarrySt]

mercenary_chester,

Либо вообще не заморачиваться и прописать для баннеров

img {
  max-width:100%;
  vertical-align: middle;
  display: inline-block;
}

Считаю так не то, что лучше, проще. Ибо и мобилки разные с разной диагональю экрана, а еще есть планшеты и прочее.

 

[mercenary_chester]

Сильно только не пинайте, только начал все енто дело изучать.

ну так и делайте в зависимости от размера ширины

это вроде при ширине страницы до 480 баннер будет 100?

Код:
img {
max-width:100%;
vertical-align: middle;
display: inline-block;
}

А это как применять?
Все применения в extra?

 

[GarrySt]

Все применения в extra?

Именно. Там и прописываете все ваши пользовательские стили.

 

[mercenary_chester]

Всем спасибо, вроде заробрался