Micheal Micheal - 6 months ago 16
jQuery Question

Responsive Image and div content CSS and HTMl

I am working on a responsive html page and I have this code to hide some content and sets a long image when view in mobile or when your web browser is minimized.

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"/>

Answer

use max-width instead of max-device-width you can also remove your inline style from the element and write your it in <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/

Comments