this works for video, not for the images. do you know some better query?
#media (max-device-width: 1024px)
and (min-device-width: 600px)
and (orientation: landscape) { ... }
If you want video, images, other media to behave responsively you will need to add in
video, embed, object, iframe, img {
width: 100%;
max-width: 100%;
}
Also to ensure that your video sizes proportionally you should check out http://fitvidsjs.com/
Related
I would like to create a full width header image that changes in size by percentage according to device.
It is an incremental zooming-like effect upon one image instead of having to use separate ones of different pixel sizes.
Please refer to media queries below which are positioned at the end of my CSS.
What is the best way to code this in CSS and HTML. I have tried a number of approaches with no success. I am working in Dreamweaver.
It is taking days to figure out. This seems a lot harder than it should be.
#media only screen and (max-width: 992px) {
.header {
max-width: 125%;
}
#media only screen and (max-width: 768px) {
.header {
max-width: 150%;
}
}
#media only screen and (max-width: 567px) {
.header {
max-width: 200%;
}
}
Media Query Running When Resizing Browser But Not In Chromes Mobile View Or When opening On Mobile.
Here's the media query i'm using:
#media only screen and (max-width: 400px) {
.date {
position: static;
top: auto;
right: auto;
}}
This meta tag was missing in the head
<meta name="viewport"content="width=device-width, initial-scale=1.0">
I am attempting to use the bootstrap carousel and started with example as shown here: http://getbootstrap.com/examples/carousel/
I have loaded test jpg (1200x480) into slides, but when you resize the browser, the images are shortened in the horizontal direction while maintaining the vertical size resulting in an increasingly distorted image as the browser is made smaller.
I've searched and found others with the same issue or some similar issue but no one has suggested anything that actually works.
Does anyone have a solution for maintaining the image aspect ratio for jpg in the bootstrap carousel?
you can resize the height of your carousel using css. this worked for me:
#media (max-width: 767px) {
.carousel .item {
height: 300px;
}
}
you can use #media to get the windowsize and set cssrules for each width using:
#media (max-width: 500px) { }
#media (min-width: 501px) and (max-width: 1000px) { }
#media (min-width: 1001px) { }
possibly you have to use it for your image-size, too.
I want to create my web application responsive only for 2 type of displays.
For medium and smaller sized screens
For larger screens
Can I achieve this using bootstrap 3? I just want a fixed size container of 970px for all screens/devices having resolutions <= 1200px and for larger screens I want my container size 1170px
Take a look at bootstrap's container class declaration in grid.less
.container {
.container-fixed();
#media (min-width: #screen-sm-min) {
width: #container-sm;
}
#media (min-width: #screen-md-min) {
width: #container-md;
}
#media (min-width: #screen-lg-min) {
width: #container-lg;
}
}
The code is self explanatory, you can make a custom built on their site.
How can you display HTML5 <video> as a full screen background to your website? Similar to this Flash site demo...
http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617
Use position:fixed on the video, set it to 100% width/height, and put a negative z-index on it so it appears behind everything.
If you look at VideoJS, the controls are just html elements sitting on top of the video, using z-index to make sure they're above.
HTML
<video id="video_background" src="video.mp4" autoplay>
(Add webm and ogg sources to support more browsers)
CSS
#video_background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
}
It'll work in most HTML5 browsers, but probably not iPhone/iPad, where the video needs to be activated, and doesn't like elements over it.
I might be a bit late to answer this but this will be useful for new people looking for this answer.
The answers above are good, but to have a perfect video background you have to check at the aspect ratio as the video might cut or the canvas around get deformed when resizing the screen or using it on different screen sizes.
I got into this issue not long ago and I found the solution using media queries.
Here is a tutorial that I wrote on how to create a Fullscreen Video Background with only CSS
I will add the code here as well:
HTML:
<div class="videoBgWrapper">
<video loop muted autoplay poster="img/videoframe.jpg" class="videoBg">
<source src="videosfolder/video.webm" type="video/webm">
<source src="videosfolder/video.mp4" type="video/mp4">
<source src="videosfolder/video.ogv" type="video/ogg">
</video>
</div>
CSS:
.videoBgWrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.videoBg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-aspect-ratio: 16/9) {
.videoBg{
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9) {
.videoBg {
width: auto;
height: 100%;
}
}
I hope you find it useful.
Just a comment on this - I've used HTML5 video for a full-screen background and it works a treat - but make sure to use either Height:100% and width:auto or the other way around - to ensure you keep aspect ratio.
As for Ipads -you can (apparently) do this, by having a hidden and then forcing the click event to fire, and having the function of the click event kick off the Load/Play().
P.s - this shouldn't require any plugins and can be done with minimal JS - If you're targeting any mobile device (I would assume you might be..) staying away from any such framework is the way forward.