Media Queries - échanger des images pour différents appareils

Question

Je suis novice dans le domaine du codage et j'ai essayé de comprendre comment changer certains éléments dans un thème WordPress, dont l'un est de montrer une image LinkedIn complète sur un ordinateur de bureau, mais sur les appareils mobiles, il passe au logo plus court [IN].

Je l'ai eu à travailler grâce à la lecture de quelques articles sur StackOverflow mais le correctif a fait l'appel à l'action déroulant sous le logo Linkedin. Je suis sûr que c'est une vraie erreur de débutant et je manque complètement quelque chose, mais je ne peux pas pour l'appel de l'action de sauvegarder à côté du logo Linkedin, à la fois sur Desktop et sur Mobile. (J'ai l'impression que cela pourrait être quelque chose à voir avec le div qui l'entoure, mais je ne vois rien avec une largeur que je peux changer dans Chrome Inspect pour le faire apparaître à côté du logo).

Heres au code:

HTML 

<a href="www.linkedin.com" target="_blank"> 
<div class="exampleimage"></div></a> 
<a href="tel:123 456 789">Need Help? Call » 123 456 789</a> 



CSS 
.exampleimage{ 
    background-image: url("http://testenvironment-wel.co.uk/wp-content/uploads/2017/09/Working-Environments-Company-LinkedIn-Logo.png"); 
    background-size: contain; 
    width: 140px; 
    height: 18px; 

} 

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

    .exampleimage{ 
     background-image: url("http://testenvironment-wel.co.uk/wp-content/uploads/2017/09/Working-Environments-LinkedIn-Logo-small-version.png"); 
    background-size: cover; 
     width: 22px; 
    height: 18px; 
    } 
} 

screen shot

Toute aide serait grandement appréciée!

:)

Answer 1

pourrait-il que le .jpeg manque dans votre requête média?

background-image: url("Linkedinlogo2.jpg"); 

Answer 2

Je vous suggère d'utiliser d'abord le mobile. Rappelez-vous que vous ne devez pas ajouter de type de fichier sur l'image de fond mobile (.jpg/.jpeg), c'est la principale raison pour laquelle cela ne fonctionne pas.

CSS 
.exampleimage{ 
    background-image: url("Linkedinlogo2.jpg"); 
    background-size: cover; 
    width: 22px; 
    height: 18px; 
} 

@media only screen and (min-width: 501px){ 
    .exampleimage{ 
    background-image: url("Linkedinlogo1.jpeg"); 
    background-size: contain; 
    width: 140px; 
    height: 18px; 
    } 
}