1 Correct answer
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;
31
Replies
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;
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.
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
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
... 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
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.
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>
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
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.
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
AdChoices