How to add an image which is displayed only on mobile device?

You can add images to your posts and pages which are displayed only on specific screen resolutions.

Add the image to your page with WordPress add media button. Set width and height of the image (100% -> width, auto -> height), and add a class name “mobileonly” like the following;

Screenshot_1

Screenshot_2

Go to Appearance-Theme Settings and copy paste the following code to the custom header script field;

<style>
.mobileonly {
display:none !important;
}
@media screen and (max-width: 480px) {
.mobileonly {
display:block !important;
}
}
</style>

Screenshot_3

After these changes your image will be displayed only on small devices ( screen width < 480px ). If you want you can change 480px with another breakpoint. For more information about css breakpoints click here…