Media Queries - Bilder für verschiedene Geräte austauschen

Question

Ich bin neu in der Codierung und ich habe versucht, herauszufinden, wie bestimmte Elemente in einem WordPress-Theme geändert werden, von denen eine auf einem Desktop ein vollständiges LinkedIn-Bild zeigt Bei mobilen Geräten wird auf das kürzere Logo [IN] umgeschaltet.

Ich habe es zu arbeiten, dank ein paar Artikel über StackOverflow zu lesen, aber der Fix hat den Call-to-Action-Drop-Down unter dem Linkedin-Logo gemacht. Ich bin mir sicher, dass dies ein echter Anfängerfehler ist und ich vermisse etwas völlig, aber ich kann nicht für das Leben von mir den Ruf zur Aktion neben dem Linkedin-Logo erhalten, sowohl auf dem Desktop als auch auf dem Handy. (Ich habe das Gefühl, dass es etwas mit dem umgebenden div zu tun hat, aber ich kann nichts mit einer Breite sehen, die ich in Chrome Inspect ändern kann, damit es neben dem Logo wieder aufspringt).

Heres zum 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

Jede Hilfe würde geschätzt sehr groß!

:)

Answer 1

Könnte es sein, dass die Jpeg in Ihrer Medienabfrage fehlt?

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

Answer 2

Ich empfehle Ihnen, zuerst mit dem Handy zu gehen. Denken Sie daran, dass Sie keinen Dateityp auf dem mobilen Hintergrundbild (.jpg/.jpeg) hinzufügen, das ist der Hauptgrund, warum es nicht funktioniert.

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; 
    } 
}