image link not showing up on Mobile screen

[fastpenguin91]

Hi, So I made a youtube badge with a link to my channel (not a subscribe button) to go to my youtube channel, On the desktop site it shows up pretty much how I want it from large screen all the way down to mobile size, but when I pull it up on my phone it is not there... It's weird because it's set up almost exactly like my Instagram badge. So why does my instagram badge show up on the mobile phone, but not the Youtube badge?

Also, my page load time is seriously slow on the mobile phone when I have the youtube badge there. I can't imagine it being a problem since it's just a link to youtube... And my page load time is fine on a desktop. My only problem is mobile.

My text widget for the youtube badge is this:

and my relevant css: https://gist.github .com/anonymous/69293302537d05acfd91

Any idea why this is slowing down just my mobile site so much? and.. why the youtube badge isn't showing up but the instagram badge is showing up? I'm on a VPS with digitalocean too... so I'm surprised it's slow.

http://startupinacar.com

[SavvyJackie]

Hi,
Check you CSS code. Looks like you are calling a localhost version here:

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .yt-b-24 { background-image: url(http://localhost:8888/startupinacar.com/wp-content/uploads/2015/06/YouTube-Badge-24.png);
	       background-size: 60px 178px;
	     }
}

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[Erik D. Slater]

@SavvyJackie - you JUST beat me to the punch there 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[SavvyJackie]

Ha! It took a bit of digging to find, because that media query was not with the others... 🙂

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[fastpenguin91]

Hi! I have got the link working now, (I swear I changed that link.. ) But now it doesn't look like the youtube png, instead it's some blurred gray/white/black square... and again, I find it really odd that it is only broken on my actual mobile device. I can scale the desktop down to mobile size and it works fine... but doesn't look right on my phone.

(and I'll move that media query, sorry 🙂 that was copied and pasted from Instagram's auto-create-a-badge

[fastpenguin91]

Oops, I forgot to say Thank you. now I just need to figure out why it looks grey. That also helped with the page load time..

[Erik D. Slater]

We are talking about the little YouTube image/link that appears in the bottom right-hand corner of the header image, right?

I just checked your site on my mobile (Android) device. Seems to be working rather nicely 🙂

I wonder if your mobile device is displaying an old/cached version.

I'm also not experiencing any page speed issues.

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[SavvyJackie]

The background size is causing the grey image. It is actually just too large to fit in the spot. This looks like the culprit:

background-size: 60px 178px;

.yt-b-24 {
    margin: 6px;
    width: 24px;
    height: 24px;
    position: relative;
    top: 240px;
    right: 100px;
    background: url(http://startupinacar.com/wp-content/uploads/2015/06/YouTube-Badge-24.png) no-repeat 0 0;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .yt-b-24 { background-image: url(http://localhost:8888/startupinacar.com/wp-content/uploads/2015/06/YouTube-Badge-24.png);
	       background-size: 60px 178px;
	     }
}

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[Erik D. Slater]

Oops, I forgot to say Thank you.

You didn't forget ... you remembered 🙂 But it seems many people on the StudioPress forums do forget ... or they just take the assistance they get here for granted ... at absolutely zero cost to them!!

Interestingly, the Authority forums experience is much much different ...

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[fastpenguin91]

aha yes!! I'm not sure if this was what you were getting at, but I removed the background-size... I'm definitely not a CSS expert, but It doesn't seem to be causing any problems by removing it...

Thanks to both of you. Got it working!

[SavvyJackie]

Great. Please mark this post as resolved.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[Author]

Posts