• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Ho to Remove an Image from Mobile Devices?

Contributor ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

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

 

www.winvoices.com

Views

325

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , May 04, 2022 May 04, 2022
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;

 

 

Likes

Translate

Translate
Community Expert ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

While I agree with what @Jon Fritz II  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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

 

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

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>

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

quote

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;

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

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?

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

quote

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

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

quote

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

quote

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

quote

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>

 

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

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

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

quote

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

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

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

quote

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

quote

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

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines