I loosely followed a basic CSS lightbox template from w3 schools for modal lightboxes. I haven't gotten to the Javascript yet, but just laying out the look and style of the lightbox.
I have a fixed position div element serving as the grey background, and inside that the "lightbox-content" div to hold an iframe of a Vimeo link. I followed a workaround to make the iframe responsive by containing it inside another div and adjusting the styling. I want the max-width of my iframe to be 1280px, but up to 100% width on anything smaller.
Everything works great on smaller screens, the iframe and contained link fills the width, stays vertically centered, and scales with the page. However, when I go above the 1280, the iframe moves in all sorts of weird ways. I'd like to have it so when the page width goes about 1280 or so,the iframe just stays at a fixed size in the center of the screen at 1280px wide.
I tried using an #media query to change some of the CSS rules, but I'm getting so lost in the position after several hours of trying. I think what's throwing me is having so many div with different types of positioning inside each other, and also not clearly understanding how to properly clear CSS rules within a media query.
Is there anything obvious I've done wrong that I could fix to help resolve the issue? It's hard to see the effect in the tiny result window, so if there's a way to make it full-screen in the browser, hopefully you can see what I'm talking about.
.lightbox {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: auto;
padding-top: 0px;
z-index: 1;
background: rgba(0, 0, 0, .85);
width: 100%;
height: 100%;
}
.lightbox-content {
position: absolute;
width: 100%;
height: auto;
max-width: 1280px;
max-height: 720px;
top: 45%;
left: 50%;
right: 50%;
margin-top: -25%;
margin-left: -50%;
}
.responsive-container {
position: relative;
overflow: hidden;
padding-bottom: 56.25%;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
#media only screen and (min-width: 1299px) {
.lightbox {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
padding-top: auto;
z-index: 1;
width: 100%;
height: 100%;
}
.lightbox-content {
position: relative;
width: 1280px;
height: 720px;
max-width: none;
max-height: none;
top: 0;
left: 0;
right: 0;
margin-top: auto;
margin-left: auto;
}
.responsive-container {
position: relative;
overflow: hidden;
padding-bottom: 56.25%;
}
.responsive-iframe {
position: absolute;
width: 100%;
height: 100%;
border: 0;
}
}
<div id="myLightbox" class="lightbox">
<div class="lightbox-content">
<div class="responsive-container">
<iframe class="responsive-iframe" id="lightbox-window" name="lightbox-window" src="https://player.vimeo.com/video/261201719" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
</div>
Related
First of all, the video is kinda scaled and I'd love it to fit in the whole screen. Besides that, I can't figure out how to make video responsive on all screen sizes.
HTML
<div class="spread-video">
<video src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" autoplay="" loop="">
</video>
</div>
CSS
.spread-video {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
Does anybody know how to achieve this? Thank you in advance!
Target the <video> instead of the parent div, see fiddle: https://jsfiddle.net/m1pz6zcu/4/
.spread-video > video {
width: 100%;
}
Since the aspect ratio of the video is different from that of the view port, a work around for the issue is to make the video width bigger then the viewport width, center it and hide the overflow. See fiddle: https://jsfiddle.net/m1pz6zcu/6/
.spread-video > video {
width: 200%;
margin-left: -50%;
}
.spread-video{
overflow: hidden;
}
Add the following css
.spread-video video {
width:100%;
}
https://jsfiddle.net/mlegg10/fsftz8rt/4/
/* Flexible iFrame */
.flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" frameborder="0" style="border:0"></iframe>
</div>
Try this
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
padding-top: 25px;
or this one
position: absolute;
width: 100%!important;
height: 100%!important;
div#ipsko changes width and height to satisfy absolute positioning.
Why img#utas doesn't?
JSFiddle: http://jsfiddle.net/pejh7/1/
HTML code:
<div id="upsko">
<img id="utas" src="http://kharg.czystybeton.pl/108.png" />
<div id="ipsko"></div>
</div>
CSS code:
div#upsko {
position: relative;
top: 200px; left: 200px; width: 100px; height: 100px;
background: rgba(255,0,0,0.5);
}
img#utas {
position: absolute;
top: 10px; left: 10px; right: 10px; bottom: 10px;
}
div#ipsko {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: rgba(0,255,0,0.5);
}
Put the img tag in a div, give the image 100% width and height, and then absolute position the container div, e.g.
HTML:
<div id="upsko">
<div id="utas">
<img src="http://kharg.czystybeton.pl/108.png" />
</div>
<div id="ipsko"></div>
</div>
CSS:
#upsko {
position: relative;
top: 200px; left: 200px; width: 100px; height: 100px;
background: rgba(255,0,0,0.5);
}
#utas {
position: absolute;
top: 10px; left: 10px; right: 10px; bottom: 10px;
}
#utas img { height: 100%; width: 100%; }
#ipsko {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: rgba(0,255,0,0.5);
}
Fiddle
The issues you describe are cause by the image width being unspecified (as other answers have stated) unfortunately without stating a px value for the image size (or converting the top/left/bottom/right and height+width to %) there's no way around this without adding an extra div.
I know adding extra div's is generally considered bad practice, but when it gives you flexibility as above, I think it's generally fine to do.
see the the div "div#ipsko" does not has its own height and width so it inherit its parent height and width . But the image has its own height and width . so you have to specify the height and width of image to make in fit in the div.
img#utas {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
}
div#upsko {
position: relative;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background: rgba(255,0,0,0.5);
}
img#utas {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
}
iv#ipsko {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,255,0,0.5);
}
please try above code.
You image's actual width and height are overriding things. (The browser will adjust an img element's dimensions to match that of the actual image, once it's downloaded it and can tell what they are, if no width and height are specified as attributes of the img or in the CSS.)
With a normal div rather than an image, you could reset the width and height back to auto if they were being set somewhere else, but auto for an image takes you back to the actual image dimensions. If you just wanted the image to match the size of the container, a 100% width/height would fix things, but that's not going to work if you want a different size implied by fixed positioning.
The only thing I can think of would be to change the markup so that your image loads inside a div, and then has 100% width.
Example jsFiddle here:
<div id="container">
<img id="utas" src="http://kharg.czystybeton.pl/108.png" />
</div>
div#container {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
width: auto;
height: auto;
}
img#utas {
width: 100%;
height: 100%;
}
I am trying to float my sidebar to the left and my slider to the right however, my images are out of the document flow.
Basically what I'm trying to do is when the user resizes the browser window, the images will shrink (which is why I am using max-width: 100%).
View in Chrome to see the issue
You can try using width : 100% for your main class like below.
.main {
position: relative;
float: right;
max-width: 600px;
margin: 0;
width: 100%;
}
EDIT:
You have edited your markup design. You have added a new content div to outside of your article div.
EDIT
#page-wrap {
max-width: 960px;
min-height: 100%;
height: auto !important;
padding-bottom: 40px;
margin: 0 auto;
position: relative;
}
#sidebar {
position: absolute;
width: 300px;
left: 0;
top: 130px;
}
.content {
max-width: 600px;
position: absolute;
left: 360px;
top: 130px;
right: 0;
}
If you change your classes this way, when the browser is resized, the image will be resized.
You can look at simple demo about this problem.
http://jsfiddle.net/qCQ9H/2/
I try <iframe> for the content and use position: fixed; for a music player player bar to keep it at the bottom of the page.
Demo: http://jsfiddle.net/ThinkingStiff/vhLeE/
HTML:
<iframe src="http://thinkingstiff.com"></iframe>
<div id="player">music player</div>
CSS:
body {
margin: 0;
height: 100%;
}
iframe {
border: 0;
display: block;
height: 100%;
width: 100%;
}
#player {
background-color: black;
bottom: 0;
color: white;
left: 0;
position: fixed;
height: 30px;
width: 100%;
}
Sadly this doesn't work well for IE or Firefix 9, it simply shows the content in a small height window: http://cl.ly/0y0T2I1R042c3G002H3y
how can I fix this ?
I've seen a similar problem before with things I've worked on, and fortunately the workaround is really simple -- IE and Firefox just need the html height to be set to 100% as well. So update the first element of your style to be:
html, body {
margin: 0;
height: 100%;
}
That should do the trick.
You should also consider dividing iframe and div heights in percentages. If you specify 100% for iframe, div might hide the scrollbars.
you may change it to
iframe {
border: 0;
display: block;
height: 97%;
width: 100%;
}
#player {
background-color: black;
bottom: 0;
color: white;
left: 0;
position: fixed;
height: 3%;
width: 100%;
}
http://jsfiddle.net/vhLeE/3/
I'm working on a prototype of a website here:
http://www.paulgrantdesign.com/valcomp/index.php
I have a div in the middle that is set to stick in the middle. It's got a given height, so in the css I did
#middle {
height: 225px;
width: 100%;
background-color: #56a6c4;
position: absolute;
top: 50%;
margin-top: -112px;
z-index: 100;
}
It sits in the middle, as required. But when the window gets too small, I don't want it to cover what's above it. Can I set it so that there's always a minimum amount of distance between the top of the window and the top of this div?
May be you can use media query for this like this:
#media only screen
and (min-width : 1000px) {
#middle {
color:red;
}
}
You can read these articles
http://css-tricks.com/6731-css-media-queries/ ,
http://css-tricks.com/6206-resolution-specific-stylesheets/
put position:relative on the body.that s a first step. I m trying..hold on..
and bottom--position:absolute. It works! yeah!
I fixed your problem by changing your html like this:
<div id="container">
<div id="top">
<div id="topcontent">
<p id="mobile">Mobile data collection</p>
<p id="slogan">Collect. Send. That's it.</p>
</div>
</div>
<div id="middle"></div>
</div>
Then changing your css like this:
#container{
width: 100%;
position: absolute;
min-height: 350px;
bottom: 20%;
top: 0;
}
#top {
width: 825px;
min-height: 250px;
display: block;
position: absolute;
left: 50%;
height: 50%;
margin-left: -412px;
overflow: auto;
bottom: 250px;
}
#topcontent {
width: 100%;
position: absolute;
bottom: 0;
}
...
#middle {
height: 225px;
width: 100%;
background-color: #56a6c4;
position: absolute;
bottom: 0;
margin-top: -112px;
z-index: 100;
}
It might need some tweaking to get it exactly how you want it; especially with the #bottom div
You need to add the attribute z-index to the elements #top and #bottom, and let them less than the z-index of #middle.