Обрезка рекламы (банера) в адаптивном режиме

[94KONG]

Ребята подскажите как обрезать это дело в адаптивном режиме;

Желательно для всех баннеров которые вылазят
Прописывал в экстра;
img {
max-width:100%;
vertical-align: middle;
display: inline-block;
}
Не прокатило,какие есть варианты?

 

[Skaiman]

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Hope]

Рекламы/банер для мобильных устройств

 

[94KONG]

Блин хз уже по всякому пробовал
Правильно вставлял в EXTRA.css
код?
<xen:if is="@enableResponsive">
@media screen and (min-width:480px) and (max-width:800px) {
/* Target landscape smartphones, portrait tablets, narrow desktops

*/
}

@media screen and (max-width:479px) {
/* Target portrait smartphones */
}
</xen:if>

 

[Skaiman]

там только комментарии :)

 

[94KONG]

там только комментарии :-)

Блин уже бшка неварит,нашол вот статейку

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Только не фига не понял:whistling:

 

[Skaiman]

Вот на примере:

#rotator_view {
    height: 60px;
}

#rotator_view img[data='load'] {
    display: block;
    height: 42px;
    margin: 10px auto;
    text-align: center;
}

@media (max-width: @maxResponsiveWideWidth)
{
#rotator_view, #rotator, #rotator img  {
        max-width: 400px;
        max-height: 51px;       
}
#rotator_view img[data='load'] {
    height: 36px;
    margin: 8px auto;
}
}
@media (max-width: @maxResponsiveMediumWidth)
{
#rotator_view, #rotator, #rotator img  {
        max-width: 350px;
        max-height: 45px;       
}
#rotator_view img[data='load'] {
    height: 31px;
    margin: 7px auto;
}
}

@media (max-width: @maxResponsiveNarrowWidth)
{
#rotator_view, #rotator, #rotator img {
        max-width: 250px;
        max-height: 32px;     
}
#rotator_view img[data='load'] {
    height: 22px;
    margin: 5px auto;
}
}

Использованы параметры из настроек адаптивного дизайна движка:

• @maxResponsiveWideWidth - 800 px
• @maxResponsiveMediumWidth - 610 px
• @maxResponsiveNarrowWidth - 480 px
  
• @nonResponsiveMinWidth - 976 px - это минимальная ширина страницы

Но тебе все равно будет сложно, исходя из начальных знаний.

 

[94KONG]

Так эти настройки прописанны в настройках стиля но не пашет(

 

[Skaiman]

Так эти настройки прописанны в настройках стиля но не пашет(

Забудь, найди кого нить, пусть сделает

 

[94KONG]

Ладно(
Может в самом банере что то изменить?

<xen:if is="{$xenOptions.kin_tick_status} == 1">
<xen:if is="{$xenOptions.kin_tick_guest} == 0"><xen:if is="{$visitor.user_id}"></xen:if>
<style>
/* Ticker Styling */
.ticker-wrapper.has-js {
margin: 0 auto;
padding: 0px 30px;
width: 480px;
height: 42px;
display: block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: {$xenOptions.kin_tick_bg};
font-size: 14px;
border: 1px solid #000;
font-family: {$xenOptions.kin_tick_font}
}
.ticker {
width: 410px;
height: 34px;
display: block;
position: relative;
overflow: hidden;
background-color: {$xenOptions.kin_tick_bg};
}
.ticker-title {
padding-top: 13px;
color: {$xenOptions.kin_tick_title_col};
font-weight: bold;
background-color: {$xenOptions.kin_tick_bg};
text-transform: uppercase;
}
.ticker-content {
margin: 0px;
padding-top: 13px;
position: absolute;
color: #1F527B;
font-weight: bold;
background-color: {$xenOptions.kin_tick_bg};
overflow: hidden;
white-space: nowrap;
line-height: 1.2em;
}
.ticker-content:focus {
none;
}
.ticker-content a {
text-decoration: none;
color: {$xenOptions.kin_tick_thread_col};
}
.ticker-content a:hover {
text-decoration: underline;
}

.ticker-author{
color:{$xenOptions.kin_tick_auth_col};
font-style:italic
}
.ticker-swipe {
padding-top: 17px;
position: absolute;
top: 0px;
background-color: {$xenOptions.kin_tick_bg};
display: block;
width: 800px;
height: 23px;
}
.ticker-swipe span {
margin-left: 1px;
background-color: {$xenOptions.kin_tick_bg};
border-bottom: 1px solid #1F527B;
height: 12px;
width: 7px;
display: block;
}
.ticker-controls {
padding: 8px 0px 0px 0px;
list-style-type: none;
float: left;
}
.ticker-controls li {
padding-top: 0px;
margin-left: 5px;
margin-top:5px;
float: left;
cursor: pointer;
height: 16px;
width: 16px;
display: block;
}
.ticker-controls li.jnt-play-pause {
background-image: url('styles/KineticTicker/controls.png');
background-position: 32px 16px;
}
.ticker-controls li.jnt-play-pause.over {
background-position: 32px 32px;
}
.ticker-controls li.jnt-play-pause.down {
background-position: 32px 0px;
}
.ticker-controls li.jnt-play-pause.paused {
background-image: url('styles/KineticTicker/controls.png');
background-position: 48px 16px;
}
.ticker-controls li.jnt-play-pause.paused.over {
background-position: 48px 32px;
}
.ticker-controls li.jnt-play-pause.paused.down {
background-position: 48px 0px;
}
.ticker-controls li.jnt-prev {
background-image: url('styles/KineticTicker/controls.png');
background-position: 0px 16px;
}
.ticker-controls li.jnt-prev.over {
background-position: 0px 32px;
}
.ticker-controls li.jnt-prev.down {
background-position: 0px 0px;
}
.ticker-controls li.jnt-next {
background-image: url('styles/KineticTicker/controls.png');
background-position: 16px 16px;
}
.ticker-controls li.jnt-next.over {
background-position: 16px 32px;
}
.ticker-controls li.jnt-next.down {
background-position: 16px 0px;
}
.js-hidden {
display: none;
}
.no-js-news {
padding: 10px 0px 0px 45px;
color: {$xenOptions.kin_tick_bg};
}
.left .ticker-swipe {
/*left: 80px;*/
}
.left .ticker-controls, .left .ticker-content, .left .ticker-title, .left .ticker {
float: left;
}
.left .ticker-controls {
padding-left: 6px;
}
.right .ticker-swipe {
/*right: 80px;*/
}
.right .ticker-controls, .right .ticker-content, .right .ticker-title, .right .ticker {
float: right;
}
.right .ticker-controls {
padding-right: 6px;
}
</style>
<script src="js/KineticTicker/jquery.ticker.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#js-news').ticker({
htmlFeed: false,
ajaxFeed: true,
feedUrl: '{$boardUrl}/index.php?forums/-/index.rss',
feedType: 'xml',
titleText: '{$xenOptions.kin_tick_title}:',
direction: 'ltr',
controls: {$xenOptions.kin_tick_controls},
displayType: '{$xenOptions.kin_tick_trans}'
});
});
</script>

<ul id="js-news" class="js-hidden">
<li class="news-item"><a href="#"></a></li>
<li class="news-item"><a href="#"></a></li>
<li class="news-item"><a href="#"></a></li>
<li class="news-item"><a href="#"></a></li>
<li class="news-item"><a href="#"></a></li>
<li class="news-item"><a href="#"></a></li>
<li class="news-item"><a href="#"></a></li>
<li class="news-item"><a href="#"></a></li>
</ul>

<xen:if is="{$xenOptions.kin_tick_guest} == 0"></xen:if></xen:if>
</xen:if>