title: Shopify - Mobile Image Loading on Desktop For 1 Sec - Even though It is Hidden
body: <p>I have 2x promo banners one for desktop (#usp-banner), one for mobile (#usp-banner2).</p>
  
  <p>Each one should only be displaying to their respective sizes because of the use of the .css:</p>
  
  <p><strong>layout.min.css</strong>
  <code>#usp-banner2{display:none}html{padding-bottom:0!important}...</code></p>
  
  <p><strong>custom.css</strong></p>
  
  <pre><code>#usp-banner2{display:none}
  
  @media (max-width:767px){
    #usp-banner{display:none!important}
    #usp-banner2{display:inline}
  }
  </code></pre>
  
  <p>Upon loading the page on Desktop or Mobile we see BOTH banners and their correct banner hides after about 1 sec. <code>Source:</code> <a href="https://www.ivyandfig.com" rel="nofollow noreferrer">https://www.ivyandfig.com</a></p>
  
  <p>I am fairly new to Shopify, but am able to modify templates. I'm curious is this due to the way .css is loaded?</p>
  
  <p>Anyone have suggestions on how to ensure the css is being loaded before the images display (as I am assuming this is part of what is happening)?</p>