link tag preload image media attribute min-width not working

-

In this post, I describe how to fix an issue I had getting the link tag media attribute with min-width to work correctly.

Screenshot of link tag with media attribute using min-width

Cause

Despite specifying a min-width of 500px, the link tag was still preloading the image even below a screen width of 500px.  The cause of the problem turned out to be the placement of my link tag in my HTML.


Resolution

The resolution turned out to be very simple.  I had inadvertently placed the link tag above my viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />


To resolve the issue, I moved my link tag below my viewport meta tag:

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
    <link rel="preload"
          href="bg-image-wide.png"
          as="image"
          media="(min-width: 500px)" />

Comments

Post a Comment

Popular posts from this blog

LG TV This app will now restart to free up more memory

-
Image
This post describes how to fix the error "This app will now restart to free up more memory" which can occur when using apps such as Netflix on an LG TV after just a few minutes of use. Resolution To resolve the issue, unplug the TV then press the on/off button for 10 seconds.  Wait a further 20 seconds then plug the TV back in and turn it back on. Apps should now run without the error. Edit: The on/off button on my LG TV is directly under the standby light on the bottom of the TV. Edit: I didn't have to do this myself but one person who has left a comment said that clearing all browsing data worked for them.  I have written a post explaining how to do this: LG TV Clear All Browsing History Data . Edit: A few other people have also suggested turning off quick start in settings (and if it's already off, turn it on then off again).  I have written a post explaining how to do this: LG TV turn off Quick Start in settings Related Posts -  LG TV delete/remove/hide ch
Read more

LG TV Clear All Browsing History Data

-
Image
This post describes how to clear all browsing history data from an LG TV. This is one way to resolve the error " This app will now restart to free up more memory " sometimes seen on LG TVs. Process The process to clear all browsing history data is as follows: 1. Press the Home button on the remote control and keep pressing right until you find the Web Browser then open it. 2. Scroll the wheel on the remote control to reveal the pointer on screen, then press the three dots stacked vertically (located in the top right of the screen, next to the close button) to open the Menu. 3. Select Settings from the Menu. 4. Scroll to the bottom of the Settings to reach the Clear Browsing Data section. 5. Press the Clear All Browsing Data button then press Yes to confirm. Related Posts -  LG TV turn off Quick Start in settings -  LG TV move or delete apps and shortcuts on home screen
Read more

LG TV turn off Quick Start in settings

-
Image
This post describes how to turn off Quick Start on an LG TV. This is one way to resolve the error " This app will now restart to free up more memory " sometimes seen on LG TVs. Process The process to turn off Quick Start on my LG TV is as follows: 1. Press the Settings (cog icon) on the remote control, this opens the side settings menu on the right hand side of the TV screen. 2. Go down to All Settings (the three dots icon that turns into a cog icon on the screen) then click. 3. Go down until you reach General (the cog and spanner icon) 4. Press right then down until you reach Quick Start+ (note: you may need to select Additional Settings before doing this on some LG TVs). 5. Toggle Quick Start+ to the off position (the circle should slide to the left): Related Posts -  LG TV Clear All Browsing History Data -  LG TV move or delete apps and shortcuts on home screen
Read more