Javascript to kill overlay background

[Demetri Tashie]

you could use javascript, and you would probably want to access the documents window.innerWidth and window.innerHeight and manipulate it from there. it is not as straight forward as you might think.

if you are new to javascript and wanting to do it as a learning experience, great. if you are actually trying to get a browser to be responsive to size, there are other, easier ways*.

some people really like, and others don’t like, the use of media queries for responsive sites. this uses straight CSS without the need for javascript ( because what if javascript is disablaed, or not present?)

a simple media query like this in your CSS would work. place it at the end, after the properties you want to change are aalready declared.

here i use a class of ‘visible’ assigned to anything i want changed. 940px and above it/they will show, below that , they will not

<style>
.visible {display:in-line;}
@media only screen and (max-width: 939px) {
.visible {display:none;}
</style>


use visiblity property to hold the space for the hidden item, if that is necessary.

*JQuery can make the scripting of the javascript easier ( depending on your point of view)

hope that helps

[Stefan Van mourik]

Wauw, Thanks for putting in the time to reply with a great answer. I will definitely start experimenting with those media Queries. Thanks again!

Have a great day