Skip to main content
Inspiring
May 2, 2022
Answered

Ho to Remove an Image from Mobile Devices?

  • May 2, 2022
  • 4 replies
  • 2505 views

I have 2 waving flags bookending my header image. I would like for them NOT to appear on mobile devices.

 

www.winvoices.com

    This topic has been closed for replies.
    Correct answer osgood_

    Sorry, I don't know where that code goes.


    quote

    Sorry, I don't know where that code goes.


    By @sneedbreedley

     

    fluid-index.css open it up and look for your #logo css selector then add:

     

    display: flex;
    align-items: center;

     

     

    4 replies

    Inspiring
    May 4, 2022

    So it's working well, but when viewed on an ipad or tablet, the right flag jumps below the header image!

    https://www.winvoices.com/

     

    Brainiac
    May 4, 2022
    quote

    So it's working well, but whenn viewed on an ipad or tablet, the right flag jumps below the header image!

    https://www.winvoices.com/

     


    By @sneedbreedley

     

     

    Try setting max-width to 768px:

     

    if (window.matchMedia('(max-width: 768px)').matches) {

    osgood_Correct answer
    Brainiac
    May 4, 2022

    Sorry, I don't know where that code goes.


    quote

    Sorry, I don't know where that code goes.


    By @sneedbreedley

     

    fluid-index.css open it up and look for your #logo css selector then add:

     

    display: flex;
    align-items: center;

     

     

    Inspiring
    May 3, 2022

    It would also work well if I could display one entire div section on larger devices, and a completely different div section on mobile devices. Is this possible?

     

    Brainiac
    May 3, 2022
    quote

    It would also work well if I could display one entire div section on larger devices, and a completely different div section on mobile devices. Is this possible?

     


    By @sneedbreedley

     

    No, that would be worse as the payload of each div will be downloaded which is poor practice on mobile devices. The idea is to deliver optimal content to mobile devices to save the users bandwith, which not only are they paying for but might not be particularly fast.

    Inspiring
    May 3, 2022

    My thought was to reposition the flags below the banner image rather than removing them when viewed on a mobile device.

    B i r n o u
    Community Expert
    May 3, 2022

    While I agree with what @Jon Fritz  says, we are here squarely in the substantive topic we started in the previous thread...
    we are entering a theatrical game that will juggle with the display / hide of content.... but that will in no way release the load of downloading these contents


    well, let us relativize, it is only a simple animated gif of the modest occupation of 51 Ko...

     

    in the remote corners here in France (offering only E or 2G)... it takes 30 seconds for such a loading... but we will not be able to cut it, because if we consult the site directly since a mobile, the image will have to be loaded all the same, in order to be hidden

     

    https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

    Brainiac
    May 3, 2022

     

    in the remote corners here in France (offering only E or 2G)... it takes 30 seconds for such a loading...


    By @B i r n o u

     

    I think youre talking about isolated cases. You  could argue - why not get rid of all the eye candy images for mobile devices. I rarely even see the picture tag being used in the case of massive hero images.

     

    Whilst l agree with you in principle, in practice, unless you want to get involved with javascript which removes the divs from the dom and then inserts them back into the dom its just not really practical to do when the images are relatively small in size.

     

    If the images were not animated gifs you could of course use simple media queries to swap out background images.

     

    I guess you could try using the picture tag to swap those flag gifs for nothing or a 1px placeholder, maybe, if display: none; is 'offensive'.

    B i r n o u
    Community Expert
    May 3, 2022

    I understand and share your point of view... although they are not isolated cases here in France, the mobile coverage is execrable, and is largely dependent on the operator... by paying at least 80 euros per month, it can improve... but the average salary in France does not allow it... hence over-indebtedness... but then it becomes political... so let's get back to javascript...

     

    the banner is 150 Kb... (2 flags and 1 textual banner)

     

    by simply removing the content of the div tag (the one with the logo ID)

    <div id="logo"></div>

    and placing the following script before closing BODY tag, it does the job at a lower cost!

        <script>
            if (window.matchMedia('(min-width: 601px)').matches) { 
                let logo = document.querySelector('#logo')
                let logo_html = '<img src="https://winvoices.com/images/flag-waving-no-usa3.gif" alt="flag" width="10%"><img src="https://winvoices.com/images/logo-03b-template.jpg" alt="Chevrolet Chevy Chevelle Impala Corvair Nova Corvette Camaro Reproduction window stickers and invoices" width="80%"><img src="https://winvoices.com/images/flag-waving-no-usa3.gif" alt="flag" width="10%">'
                logo.innerHTML = logo_html
            } else {
                console.log("I download nothing and preserve bears on the ice")
            }
        </script>

     

    Jon Fritz
    Community Expert
    May 3, 2022

    Since they're just window dressing .gifs, give them a class, like: class="flags" in their html, and in your mobile media query css, set their display to none: .flags {display:none;}

    Inspiring
    May 3, 2022

    I'm not well versed in code. I don't know where to put class="flags", I don't know how to identify those images as the "flags" in quation, and I don't know where the media query css goes. Truth is I would never be able to create or maintain this website without the extraordinary help from this forum!