Question

Здравствуйте. Работаю над улучшением адаптивности дизайна сайта. Отдельной мобильной версии у него нет, но зато страницы сайта вроде бы неплохо подогнаны под мобильники. Однако недавно я решил вставлять в статьи небольшую боковую картинку вверху.

Пример на скриншоте

Проблема в том, что хотя эта картинка имеет не фиксированные размеры, она плохо адаптируется под мобильники, так как при уменьшении экрана она сама тоже просто уменьшается в размере и остается с правой стороны от текста. А мне нужно, чтобы на экране мобильника эта картинка расширялась на весь экран НАД текстом. 

Несколько лет назад я покупал на юкозе один шаблон, где эта идея была отлично организована. Вот тут можно глянуть на их демо-сайте https://newsportals.ucoz.net/news/tolstoj_poprosit_mehriju_proverit_fakty_sobranij_zhilcov_po_renovacii/2017-07-16-31

Я пытался взять код той картинки и поставить его на свой сайт.  Но у меня почему-то никак не получается чтобы при маленьком экране картинка становилась так как мне надо. Не могу понять что я упускаю, вероятно нужные еще какие-то дополнительные коды в CSS или в шаблоне страницы?

Вот те коды для боковой картинки, которые я "трансплантировал" на свой сайт.

 
<div class="h-mtr-full">
<span class="h-se-date">$ADD_DATE$</span>
<img alt="$ENTRY_NAME$ - $OTHER3$" src="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>/img/noimage.png<?endif?>" alt="" />
 </div>

.h-mtr-full {float:left;width:46%;margin-right:30px;margin-bottom:10px;position:relative}
.h-mtr-full img {width:100%}

.h-se-date {display:inline-block;position:absolute;top:0px;left:0px;color:#fff;text-align:center;padding:4px 12px;font-size:11px;line-height:24px;background:#8fbf83;}

Answer 1

Пропишите это в ксс

@media only screen and (max-width: 480px) {
.h-mtr-full {
    margin: 0px;

float: none;

width: 100%;
    position: relative;
}
}

Comments

Получилось! Спасибо!