Отзывчивое изображение и содержание div CSS и HTMl

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

стиль CSS

  @media only screen and (max-device-width: 480px) {
     .mobile_only {
       width:600px !important;
       overflow:visible !important;
       float: none !important;
       }
   }

HTML

<div class="mobile_only" style="width:0px; overflow:hidden;float:left">test</div>
<img src="longimage.png" title="hide me in mobile thanks"/>

1 ответ

  1. используйте max-widthвместо max-device-widthВы можете также удалить ваш inline styleИЗ elementи написать ваш ИТ в <style>

    .mobile_only{
      width:0px;
      overflow:hidden;
      float:left;
    }
    
    @media only screen and (max-width: 480px) {
      .mobile_only {
        width:600px !important;
        overflow:visible !important;
        float: none !important;
      }
    }
    

    https://jsfiddle.net/uvmpde98/