How to hide something in mobile view in responsive design
At times you have to hide something like a banner or a paragraph of text or a slideshow in mobile view depending on the relative importance of it while designing an html page as a part of responsive design. This can be done with the help of style sheet. View the sample code below. Style sheet @media only screen and (max-width:600px) { .hideObject { display: none!important; } .keepObjeect { display: block!important; width: auto!important; max-width: 100%!important; margin: auto!important; } } HTML code Normally the image will be shown in all devices irrespective of screen size. But to hide it in mobile use class defined in CSS above. <img src="images/banner2.jpg" width="800" height="200" class="keepObject" alt="how to keep image in mobile view" / > <!-- shows the image both in normal view and in small devices like mobile. --> <img src="images/banner1.jpg" width="800" heig...