How to Hide Images on a Website When It is Viewed on a Mobile Phone

Making Pictures Disappear on Mobile Devices and Small Screens

How to Hide Images on a Website When It is Viewed on a Mobile Phone

by Christopher Heng,

I was asked by a visitor how she could hide certain images on her website when it was viewed on a mobile phone. This article answers that question.


  1. I will assume here that you know a bit of HTML and CSS. You don't have to be an expert but you will need a little bit of knowledge otherwise you won't know where or how to make the changes described here.

  2. As you might expect, I will make use of the media queries facilities provided by CSS to accomplish the task here. If you don't know what this is, you should read How to Make a Mobile-Friendly Website: Responsive Design in CSS before returning to this article.

Hiding an Image in CSS

The trick to hiding any element on your web page is to insert either a "display: none;" or "visibility: hidden;" rule for that element. The "display: none;" rule not only hides the element, but also removes it from the document flow. That is, the web browser will not leave any space for that element when it displays the page. The "visibility: hidden;" rule hides the element but causes the browser to still leave an appropriate amount of blank space for it.

To suppress the display of the image only on devices with a small screen, like mobile phones, include the rule in the section of your style sheet that is only applied in such instances.

Take the following as an example.

@media (max-width:629px) {
  img#optionalstuff {
    display: none;

The image with an id of "optionalstuff" will not only be removed in browser windows that are narrower than 630 pixels, the browser will also not leave any space for it when rendering the page. Remember to add the matching id to the image in question.

<img id="optionalstuff" src="some-picture-or-other.png">

Of course for the rule to work on a mobile phone, your page should also do the other things mentioned in the article on making a website mobile-friendly, namely, overriding the phone's default scaling of your web page, otherwise the window will always be regarded as larger than 630 pixels and the rule will not be triggered. If you don't know what I'm talking about here, please read that article.

You can, of course, choose to use "visibility: hidden;" instead, although I suspect that it is not what you actually want. I say this because if a person is trying to accommodate a mobile device by removing things that are too large for the screen, he/she is unlikely to want to leave a gap the size of the removed element. It will defeat the purpose of the exercise.

Alternative Way of Solving the Problem

Hiding the image on a small screen is useful if it is not relevant for phone or tablet users. However, if you are removing it merely because it is too big, and not because it doesn't apply to such visitors, another way to solve the problem is to cause the picture to be resized on such devices. That is, display the image in its full glory on desktop computers and laptops, but shrink it on phones and tablets.

The technique to do this is described in How to Make Your Images Mobile-Friendly (Responsive Design). This is actually the method used by many sites to deal with large pictures, and is indeed how deals with illustrations that exceed the width of a typical mobile phone's browser.

Copyright © 2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Hide Images on a Website When It is Viewed on a Mobile Phone

Link to Us
No Spam Policy
Privacy Policy
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Web Hosting
Perl / CGI
.htaccess / Apache


Free webmasters and programmers resources, scripts and tutorials Free How-To Guides
Site Design Tips at
Find this site useful?
Please link to us.