Ho to Remove an Image from Mobile Devices?

[sneedbreedley]

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

www.winvoices.com

[Jon Fritz]

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

[sneedbreedley]

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!

[B i r n o u]

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

[osgood_]

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]

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>

[osgood_]

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!

By @B i r n o u

Well you would need to start off with something in the logo div for the mobile device!

It works of course at a basic level but you might want to consider taking into consideration making the layout look the same in the case of the browser window being narrowed and widened on desktop browser, which would involve a resize event and alternative code. It depends how involved you want to get and what results you need as to how much javascript is deployed. Then you need to weight up is it worth it or just use a simple media query display: none;

[sneedbreedley]

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?

[osgood_]

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.

[sneedbreedley]

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

[osgood_]

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

By @sneedbreedley

You can do that but you'll have to revise your html code and css (see below).

<div id="logo">

<img src="https://winvoices.com/images/flag-waving-no-usa3.gif" alt="flag" class="flagLeft">

<picture>
<source media="(min-width:650px)" srcset="https://winvoices.com/images/logo-03b-template.jpg">
<source media="(min-width:465px)" srcset="https://winvoices.com/images/logo-03-mobile.jpg">
<img src="https://winvoices.com/images/logo-03-mobile.jpg" alt="Chevrolet Chevy Chevelle Impala Corvair Nova Corvette Camaro Reproduction window stickers and invoices" class="corporateLogo">
</picture>

<img src="https://winvoices.com/images/flag-waving-no-usa3.gif" alt="flag" class="flagRight">

</div>

Then use the below css:

#logo {
display: flex;
align-items: center;
justify-content: space-between;
}
.flagLeft, .flagRight {
width: 10%;
}
picture {
width: 79%;
}
picture img {
max-width: 100%;
display: block;
}

@media screen and (max-width: 650px) {
#logo {
flex-wrap: wrap;
justify-content: center;
}
picture {
width: 100%;
}
.flagLeft, .flagRight {
width: 20%;
}
.flagLeft {
order: 3;
}
}

r 

[B i r n o u]

please NO OFFENSE...

you remind me of some customers who change their ideas as the development progresses... 🙂

In fact, this is precisely why I have opted for an Agile method for many years ( https://en.wikipedia.org/wiki/Agile_software_development ) ...

if you reread the subject of your initial POST, you said

Ho to Remove an Image from Mobile Devices?

... and now you say...

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

By @sneedbreedley

so give a try to what propose @osgood_ that should do the job as you expect 😉

again, please don't take offense

[osgood_]

please NO OFFENSE...

you remind me of some customers who change their ideas as the development progresses... 🙂

By @B i r n o u

lol, that's precisely one of the reasons I finally gave in!!! Couldnt work with clients any longer.......waste of time. Its so much more peaceful without them.

[sneedbreedley]

My preference was to remove the flags. My suggestion of moving the flags was only if they couldn't be removed.

[sneedbreedley]

A already have several .css files on the site. Do I add this css to one of those?

[osgood_]

My preference was to remove the flags. My suggestion of moving the flags was only if they couldn't be removed.

By @sneedbreedley

Hummm if you want to remove the flags in mobile devices then use Birnou's javascript solution. I've just altered it so it works on browser window resize:

Remove the html mark up from the 'logo' div so you are left with <div id="logo"></div>

Then add the script below to your page/s directly before the closing </body> tag:

<script>
window.addEventListener('resize', getWindowWidth);

function getWindowWidth() {
if (window.matchMedia('(max-width: 650px)').matches) { 
let logo = document.querySelector('#logo')
let logo_html = `
<img src="https://winvoices.com/images/logo-03-mobile.jpg" alt="Chevrolet Chevy Chevelle Impala Corvair Nova Corvette Camaro Reproduction window stickers and invoices" width="100%">
`
logo.innerHTML = logo_html
} 
else {
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="79%">
<img src="https://winvoices.com/images/flag-waving-no-usa3.gif" alt="flag" width="10%">
`
logo.innerHTML = logo_html
}
}
getWindowWidth();
</script>

[sneedbreedley]

I changed the code but I'm getting a syntax error on this line:

let logo = document.querySelector('#logo')

[B i r n o u]

I changed the code but I'm getting a syntax error on this line:

let logo = document.querySelector('#logo')

By @sneedbreedley

do you still have the

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

present in the page

does the SCRIPT proposed by @osgood_ is well place on the bottom of your HTML code... just before the closing BODY ?

otherwise what error message do you get

[sneedbreedley]

Yes,        <div id="logo"></div>        is still there.

This error message says:   code hinting may not work until you fix this error

[osgood_]

Yes,        <div id="logo"></div>        is still there.

This error message says:   code hinting may not work until you fix this error

By @sneedbreedley

Stick the ; at the end of the line, that should satisfy DW. Personally l would just turn off the code linting in DW as it doesn't always get it right, it's just a wild guess at times like in most editors or IDES, none that I've ever used get it right 100% of the time.

If there are no errors when you look at the console in the  browsers dev tools then you are good to go.

[osgood_]

You shouldnt need to but try adding ; at the end of the line, failing that l can't see why that line would cause issues. If it persists then upload the page to your server and supply the url.

Does the page actually work, if so it could just be DW is giving you the error. Check in the browser dev tools console window, that's more reliable.

[sneedbreedley]

I added the semicolon and the syntax error is still there, but the flags do disappear on a smaller screen.

https://www.winvoices.com/index-test.php

[osgood_]

I added the semicolon and the syntax error is still there, but the flags do disappear on a smaller screen.

https://www.winvoices.com/index-test.php

By @sneedbreedley

When l tested it there were no errors in the browser console and that is what counts, not what DW is showing, youre good to go. Dw might be having a hissy fit about something else its not up to date with.

It's always good practice to use semi colons at the end of a statement but if you miss them out they get automatically inserted when the script is parsed but l would still get into the habit of manually inserting them

[B i r n o u]

yes the idea of listening the resizing stage is cool... and I added a like to your post, but it is somehow a kind of contradiction in terms...

the final idea is not to hide the HEADER for small size screen, but for mobile...

so,

point 1... a mobile will never go higher than its initial width... (except for those who turn phone upside down between landscape, and portrait... that is only used by old grumpy people like us... did you remark I said US)... Statistics demonstrates that Phone are use vertically, except when playing video

point 2... either if the phone move on landscape .... what will be the reason for the HEADER to suddenly appears

point 3... now on a non mobile device... HIDDEN the current donwloaded HEADER when the display becomes too smaller is good enought... so no need for a sniffer... just an MQ whith a hidden / block swap... who cares, the media is already downloaded, or should be

[osgood_]

Yes l get it but as a developer l'm constantly looking at what the page layout looks like at various window widths on desktop so l need the logo content to alternate between desktop and mobile. Of course this won't apply at mobile sizes because you can't easily vary the window width. It's more for development purposes and those who might narrow their desktop browsers window, rather than a strict necessity.