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) {

Translate

S

sneedbreedleyAuthor

Inspiring

Will that remove the flags when viewed on a tablet? I'd rather keep the flags on a tablet, if possible.

Translate

S

sneedbreedleyAuthor

Inspiring

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?

Translate

O

osgood_

Legend

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.

Translate

S

sneedbreedleyAuthor

Inspiring

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

Translate

B i r n o u

Legend

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

Translate

O

osgood_

Legend

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'.

Translate

B i r n o u

Legend

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>

Translate

Jon Fritz

Community Expert

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;}

Translate

S

sneedbreedleyAuthor

Inspiring

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!

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.