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.
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.
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.
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.
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.
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.
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 thesitewizard.com 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 https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Hide Images on a Website When It is Viewed on a Mobile Phone
