[andynz]

I understand why the images on sidebars are displayed below the content when the website is viewed on a mobile. In this case, I would like to display an image in the main content. To do this I have defined a class:

@media screen and (min-width: 600px)
{
.xx-img-mobile-only {display: none}
}

and the following in the content:

<span class=”xx-img-mobile-only”><img src=”…….” /></span>

This works fine. The image is displayed on my particular phone and not on my desktop.

However, I am not sure that ‘min-width: 600px’ will always have the desired result.

What I would like to do is to display the image if, and only if, Tempera has adapted the website for a smaller screen. Is there a better test than:

@media screen and (min-width: 600px)

Andy

Website: waibopscd.org.nz

[Author]

Posts