Metro Pro theme Widget Icon Link dies at 1000px width

[bearthedog]

Hi,
I placed an icon in an image widget in the "Header Right Area" with a link to whitehouse.gov. It works on the desktop but when it reaches approx. a width of 1000px the link is no longer available. This continues down to the smallest mobile sizes. The image is the American flag in the top right corner of the website. Have only a CSS margin adjustment, tried deactivating it and still NG. Also tried link with and without http:// and w/&w/o www. still NG.
Thanks for any help.

http://forbloggingoutloud.com

[Victor Font]

What's happening is that the link is hidden behind the padding for the title area. The two areas are crashing into each other and the link is behind the title. If you want to keep the link available, you have to move it higher up in the z-index. Here's the CSS.

.widget_sp_image-image-link {
    position: relative;
    z-index: 10;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[bearthedog]

Hi Victor,
Thanks so much for answering, however it doesn't seem to work. I raised the z-index up to 10000 still NG.
I tried a different selector and variations, Any other thoughts?

[Victor Font]

Make sure you clear all caches and hold shift down while reloading the page. This code works. I tested it with your site on http://semalt.design/. If you are using a mobile device, you have to physically clear the browser cache. Mobile phones are notorious for not updating style sheets.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[bearthedog]

Hi Victor,
I tried what you suggested however it still is not working. Currently the code is:
.widget_sp_image-image-link {
position: relative !important;
z-index: 10000 !important;
}
----------------I also tried this:
section#widget_sp_image-12.widget.widget_sp_image /*.widget_sp_image-image-link*/ {
position: relative !important;
z-index: 100000 !important;
}

I also tried it at semalt and even there it doesn't work.
I have tried it on numerous browsers. Using various responsive tools as in Safari, Firefox,
Chrome and Opera.
I can't recreate it but I could swear in Opera when I was in developer tools on the 800x600
size I thought it worked but when I tried again it didn't, maybe it was wishful thinking.
Very frustrating.

[Author]

Posts