We Keep Coding

Percentage margin-bottom Media query not working Jquery

Ive been building a small image lightbox and im trying to make the width of the image and its containing div 100% of the page when the screen size is 600px, but my media query wont execute for some reason. Does this have to do with the margin-bottom being a percentage?
Thanks
https://jsfiddle.net/egL1offh/
#media screen and (max-width: 600px){
.lightboxCenter{
position: fixed;
width: 100%;
margin-bottom: 17.5%;
margin-top: auto;
top: 25%;
}
.lightboxCenter>img{
position: fixed;
width: 100%;
margin-bottom: 17.5%;
margin-top: auto;
top: 25%;
}
}

See I couldn't find anything inside of .lightboxCenter i.e. it is empty and this what you are declaring in media query .lightboxCenter > img, so it won't works, as you are selecting a child element, but it's a empty div. img tag is present inside .imageGallery, so you need to use that to scale your image 100% at max-width of 600px as below,
#media screen and (max-width: 600px){
.imageGallery{
width:100%;
height:auto;
}
.imageGallery > img{
width:100%;
}
}

CSS media: how to run the media code only if scroll bar appears (or how to imitate with JavaScript)?

How can I use CSS #media to imitate javaScript for the this condition below?
For instance, I want to run the code inside #media only when the image's height is longer than window's height, or in other words, when only the right scroll bar appears because the image height is too long.
.img-container {
text-align: center;
}
#media (min-height: 60em) {
.img-container {
display: inline-block;
height: 100vh;
width: 100%;
text-align: center;
border: 4px solid green;
}
.img-container img{
height: 100%;
}
}
so if I have this image in my html,
<div class="img-container">
<img src="http://placehold.it/400x850"> <-- a long image height so run the code inside #media
</div>
but if I have this below instead in my HTML,
<div class="img-container">
<img src="http://placehold.it/400x450"> <-- don't run the code inside #media
</div>
In javascript, if you detect the image height is longer than the screen height, then you run the code to scale down the image, while if it detects the image height is smaller than the screen height, then do nothing
Is it possible with css #media?
This is what I get at the moment:

I think this is the answer I am looking for:
.img-container {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
}
.img-container img{
max-height:100%;
margin-left: auto;
margin-right: auto;
}

Slider is not properly working when width is 100%

I'm trying to make a slider with width: 100% of the parent.
Here is a working demo.
.moving_container ul li {
/*width: 100%;*/
width: 500px;
height: 300px;
list-style: none;
float: left;
position: relative;
display: block;
/* background-repeat: no-repeat;
background-size: 100%;*/
}
It's working fine now. When i set width 100%, I am not getting the slider view as in width 500px. What is the correct property so that this slider works in all the sized windows.
I just played with background-properties. Unfortunately I din't get it.
Any Suggestions?

Add this on top of your JS Function:
$('.moving_container li').width($(window).width());

How to dynamically set the height in a CSS-class depending on the browser's window size with Javascript / jQuery?

I am trying to create 2 independently scrollable columns (left and right) using the Bootstrap 3 grid, which should dynamically change their height depending on the browser's windows size and are offset by a top-padding of 100px for a navigation bar. At the moment I have to set a fixed height (600px), which obviously doesn't scale very well on different screen sizes.
CSS:
.left {
height: 600px;
overflow: auto;
}
.right {
height: 600px;
overflow: auto;
}
HTML:
<div class="row">
<div class="col-md-9 left scrollable">
// Content Left Column
</div>
<div class="col-md-3 right scrollable">
// Content Right Column
</div>
</div>
I already tried to put them in a #testdiv and change its' height with a Javscript / jQuery solution, which doesn't seem to work:
$('#testdiv').height($(window).height() - 100)
Would appreciate your advise.

I think this is what you're looking to accomplish:
DEMO
This uses css calc to set the height of the two left/right columns to 100% of the window minus the height of your navigation bar (I used html5 <aside> but no reason you can't use div tags with classes if you prefer).
Don't forget, the height of an element is dependent upon the parent element having its height set. So, in this case, I set the html and body height 100% of the window height using 100vh. That will constrain the height of the entire page to the height of the window. If you wanted your main content to not have the independent scroll behavior (from overflow: auto), then set the html/body height to 100% instead.
Here's the core essence of the demo css/html:
CSS:
body, html {
height: 100vh;
margin: 0;
padding: 0;
}
nav {
background-color: palegreen;
height: 100px;
}
main, aside {
overflow: auto;
height: calc(100% - 100px);
float: left;
}
main {
width: 50%;
background-color: pink;
}
aside {
width: 25%;
background: #ccc;
}
HTML:
<nav>
Navigation
</nav>
<aside>
Left Aside
</aside>
<main>
Main Content
</main>
<aside>
Right Aside
</aside>

Use this in your CSS file :
#media only screen and (min-device-width: 1600px) and (max-device-width: 1700px) {
////your css codes
}
OR
#media only screen and (min-width: 1600px) and (max-width: 1700px) {
////your css codes
}

If your only goal is to scale down, use EMs instead of pixels, then change the font-size for smaller screens.
#media all and (min-width: 901px){ html{ font-size:100.00%;} }
#media all and (max-width: 875px) and (min-width: 851px){ html{ font-size: 98%;} }
#media all and (max-width: 850px) and (min-width: 826px){ html{ font-size: 96%;} }
etc....
.left {
height: 37.5em;
overflow: auto;
}
.right {
height: 37.5em;
overflow: auto;
}

If you really, really want to pin the height of an element to the browser window, you can probably just use fixed positioning.
.left, .right {
position: fixed;
top: 100px;
bottom: 0;
overflow: auto;
}
.left {
left: 0;
width: 200px;
}
.right {
left: 200px;
right: 0;
}
Here's a JSFiddle that demonstrates what that does. Of course, this doesn't look good at all on mobile devices.

Is there a way to stop absolute positioned divs from disappearing on small screens?

I'm not really sure how to explain this so here is a picture:
Window To Small http://vsave.org/my/user_folders/Ian33_159/image.jpg
As you can see in the picture, as the screen shrinks, the picture moves out of view because I use the code:
position: absolute;
left: 50%;
margin-left: -450px;
width: 900px;
since it is subtracting 450px it moves into the left of your screen where you can't see it anymore.
Here is the code for my body tag:
body {
margin: 0px;
padding: 0px;
min-width:1000px; /* suppose you want minimun width of 1000px */
width: auto !important; /* Firefox will set width as auto */
width:1000px; /* As IE ignores !important it will set width as 1000px;*/
}
If you need more information just let me know.
Thanks

Set a min-width on the parent element (or body) and that will make it so that the window will have horizontal scroll instead of running off the page.
Note that min-width is IE 7+

You could use media queries to adapt to the smaller screen size:
#media screen and (min-width: 900px) {
#container {
position: static;
/* Or */
width: 450px;
margin-left: -225px;
}
}