CODEWITHSUNDEEP
htmlcssimagemobile
Fergus Barker
Fergus Barker

Reputation: 1342

CSS/HTML - Hide images on mobile phone and use an alternate text

I currently have a page that generates a table from an SQL database using PHP, including one column that contains images. Due to us now having to work on a mobile platform, I'm looking for a way to hide the images. I'm currently using display: none on an antiscreen.css file, but as the images are links, it doesn't show the links

For clarity, when the image is on a PC browser it appears like this:

<td>
  <a href="link to image source:>
    <img  height=80 alt='Text I want to display' src="link to image source" />
  </a>
</td>

And when on a mobile the image, link and text are hidden using the display:none method.

So how would you recommend I work this out?

Upvotes: 0

Views: 11758

Answers (2)

user2381876
user2381876

Reputation: 11

Another option, which works for all screen sizes under a certain nr. of pixels is to use a media query, basically similar to the above one but with the advantage that it works on any screen size smaller than the defined number of pixels.

    /* Media Query for mobile */

    @media screen and (max-width: 480px) {  

    /* This resizes tables and images to be 100% wide with a proportionate width */

    /* Hide stuff on mobiles */
    table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}

    /* Additional Media Query for tablets */

    @media screen and (min-width: 480px) and (max-width: 1024px) {

    /* Hide stuff on tablets */
    table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}

This should covers both mobile and tablet devices.

Code courtesy of .net email tutorial. I only stripped the parts you don't need.

Usage:

<img class="emailnomob" height=80 alt="Text I want to display" src="link to image source" />

Upvotes: 0

Kaivosukeltaja
Kaivosukeltaja

Reputation: 15735

I would probably do this:

<td>
  <a href="link to image source:>
    <img  height=80 alt='Text I want to display' src="link to image source" />
    <span class="mobileonly" src="link to image source">Text I want to display</span>
  </a>
</td>

Then I would set span.mobileonly { display: none; } on the main stylesheet and span.mobileonly { display: inline; } in antiscreen.css. The advantage is that the mobile link will also be easy to style.

Upvotes: 1

Related Questions