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

img show half cut on mobile screen but OK on computer screen, css jQuery?

Weird thing happen on mobile screen. It is OK on computer screen. when user click the img, it will remove the img, and click another button, it will show the img. See the img, when it show, it's like the first one,half cut, when I remove, it's like the second one, the pick still there. How can I fix this with css? My code is like below.Appreciate. If I remove the position:fixed for the text below the img, then it is OK, but I need it fixed.
$('#avatar-suggestions-selector').click(function(){
$('.avatar').fadeIn();
$('#img_text').fadeIn();
});
$('#avatar-suggestions-selector_s').click(function(){
$('.avatar').fadeOut();
$('#img_text').fadeOut();
});
img.avatar{
display:none;
position:fixed ;
top: 61px ;
left: 12px ;
width:140px;
}
#img_text{
display:none;
position: fixed;
left: 25px;
background: none repeat scroll 0% 0% #6d9bff;
top: 218px;
color: white;
padding: 8px;
border-radius: 9px;
}

CSS:
#media screen and (max-width: 768px){
img.avatar{
width: 100%;
}
}
#media screen and (max-width: 420px){
img.avatar{
width: 100%;
}
}
I hope this helps. Just put this in your CSS. For Tablet your can use the 768 viewport and for mobiles you can use the 420 viewport.

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.

CSS position fixed. Div wrapper must be fixed vertically but must be varying in horizontally

I have a div , something like this
#footer
{ position:fixed;
left:40px;
top:0px;
}
The position is fixed when I scroll vertically or horizontally. But i want the div to be fixed when user scrolls the scroll bar vertically but should be varying when user scrolls the scroll-bar horizontally.
I have seen some of the forums and posts but mostly I found jquery script.I want to know if there is a way to do it in CSS?
Fixed position in only one direction
I read this post but I did not understand the jquery script. Kindly let me know the way to do it in css or the better way to do it with jquery.Thanks

Seems to be impossible to get this "look fine" with only CSS/HTML.
As mentioned from Ruup or Fixed position in only one direction, layering over JS for it, is a good option.
Fortunately, i found a way to get it work somehow (not that beautiful):
http://jsfiddle.net/MKEbW/5/
HTML (inside the body-tag):
<div id="simulated-html">
<div id="footer">
<span>
<!-- Footer text here -->
</span>
</div>
<div id="simulated-body">
<!-- Your website here -->
</div>
</div>
CSS:
* { margin:0; padding:0; }
html {
font: 12px/1.5em Georgia;
}
p { padding: 5px; }
html, body {
height: 100%;
overflow: hidden; /* hide scrollbars, we create our own */
}
#simulated-html {
background: orange;
overflow-x: scroll; /* force horizontal scrollbars (optional) */
overflow-y: hidden; /* hide. we use the #simulated-body for it. */
position: relative; /* to align #footer on #simulated-html */
height: 100%;
}
#simulated-body {
overflow-y: scroll; /* force vertical scrollbars (optional) */
overflow-x: hidden; /* hide. we use the #simulated-html for it. */
height: 100%;
background: #eee;
/* use as a container */
width: 450px;
margin: 0 auto;
}
#footer {
position: absolute;
bottom: 0px; /* vertical align it to #simulated-html */
width: 100%;
background: red;
z-index: 99; /* always show footer */
color: white;
}
#footer span {
width: 450px;
margin: 0 auto;
background: green;
display: block;
}
​
Seems to work in IE7+ and modern browsers, tested via browserlab.adobe.com.
Tested with scrollbars, smaller and wider viewports in Chrome 18.
I recommend a fallback for not capable browsers and/or a JS workaround.

The linked post is exactly what you need. You can copy the exact script.
$(window).scroll(function(){
$('#footer').css('left','-'+$(window).scrollLeft());
});
The div css is like this (probably not footer when it has top 0px :P but ok)
#footer
{ position:fixed;
left:40px;
top:0px;
}
When you scroll the jquery script just adjusts the left(x) coordinate to the same value as the scrollLeft of the window.

There is a small fix on the previous code.
The changed javascript code for moving fixed div horizontally
$(window).scroll(function(){
$('#footer').css('left',-$(window).scrollLeft());
});

how should the horizontal axis vary? the way this code is currently it would stay 40px from the left at all times. in order to make the left margin change position relative to the size of the window you must use percentages and negative margins. for instance, to center a fixed div:
#centered {
height: 350px;
top: 0;
position: fixed;
width: 1024px;
left: 50%;
margin-left: -512px;
z-index: 9999;
}
notice that your negative margin must be HALF the width of your div. if you want it 40px to the left of center then you would add another 40px to margin-left.

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