I'm trying to work with a responsive Bootstrap carousel, but for some reason, I seem to be getting a 'scroll' on mobile. Can someone please make a suggestion with this?
The link is here: https://mydigitalmidlands.co.uk/vogue-interiors.co.uk/
The slide images are set as backgrounds, and CSS is below:
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
it seems to be the height property '100vh' which is the problem. if i lower this, we get a white border on the bottom.
is there any way to make the carousel slides responsive, without the scroll or white gap?
(For a Javascript workaround see bottom of answer)
It looks as though you are bumping up against the vh ‘fix’ which I believe is now implemented at least on iOS and Android.
That is they set the vh so it does not change when the user scrolls vertically as they were otherwise experiencing a jump effect when they scrolled and part of the browser bar at the top disappears as the viewport height then changed. I guess fixing it to a value so that it did not change even when the viewport changed was a sort of compromise.
The only way I Have got round it so far is to set the height a bit less than 100vh. I’ve been lazy and kept it like that for all sites so some see a taller footer than they otherwise would. Would be good to hear of a proper CSS way of doing it so those on
devices with variable vh get the footer without a line or so extra It uses CSS variavpbleswhite.
I realise this isn’t a full answer as it doesn’t give a perfect workaround, but it was too long for a comment.
Update: there is a Javascript workaround described in https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
After your height: 100vh Put another line
height: calc(var(--vh, 1vh) * 100);
And have this JS run on load (and on resize for if the user changes the device orientation
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`)
This may seem a little to easy and may not work for you but I had the exact same issue a few days ago and all I did was set the width to auto and it worked and the scrollbar was gone on smaller screens:
width: auto;
Related
In some cases, when one of the parent elements in HTML is having margin of padding defined at the bottom or at the top, it will happen that your video object can't stretch the source media to the fullest within itself. Even if you define the object-fit:cover you will still have the small gap at the top or the bottom of the video tag. This is happening only in Google Chrome as far as I know.
In my case, setting display: block; on video element solved the issue.
The only thing that helped me solve this issue is to set the object-position: top or object-position: bottom; on the video tag. It depends where the gap is.
I already googled this for a while, but simply can't find the answer. So, my question is: how do sites like this
http://tasag.de/
work? There are several background images that are shown behind the content box when you scroll down. When you scroll up and down you see that they occupy the whole screen, but sometimes you can see two of them, one at the upper an one at the lower part of the screen, at the same time. How does this work? I simply can't figure it out.
Thanks a lot
If you look at the css of one of those backgrounds you find the key declaration:
background-attachment: fixed;
This means the background doesn't move, even when the user scrolls, allowing you can have different scrolling divs and the background will always look fixed
Here I prepared a sketchy fiddle: http://jsfiddle.net/3UpUb/
.container2 p{
background-image: url(http://tasag.de/wp-content/uploads/2014/01/img-3-blur.jpg);
background-repeat: repeat;
background-position: center top;
background-size: auto;
background-attachment: fixed;
}
You can use Parallax scrolling and put the speed to 0. Then the image stays fixed but will change when you scroll to next background image.
I used this Parallax plugin.
I've searched for hours upon hours and now I figure it's time for me to ask the question. I can't get my background image that is placed in my header to fit to screen. It works for every kind of computer resolution fine, but where I run into trouble is when I am viewing on a phone, it doesn't want to shrink. I've done min-height, max-height, I've tried everything, the problem partly I think is that the header div itself is smaller than this image, but I also don't really know and need some guidance, i'm relatively new to the CSS scene.
Here is what I have:
#header {
background-image: url('http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 209px;
}
Website url is http://hamsoc.polymath.io
Thank you for your help in advance!
Duncan Beattie gave me the answer and it worked like a charm. Here is what he said:
"You have background-size: cover which is fitting the height of the
background image to the fixed height of your div, 209px. remove the
fixed height and replace with padding-bottom:15% this will kep the
aspect ratio of the div the same and scale the image as viewport gets
smaller."
You have background-size: cover which is fitting the height of the background image to the fixed height of your div, 209px.
remove the fixed height and replace with padding-bottom:15% this will kep the aspect ratio of the div the same and scale the image as viewport gets smaller.
I would suggest having the header image in your HTML rather than a background image and then setting a max-width like so:
#header img{
max-width: 100%;
height: auto;
}
This will also allow you to make the image "clickable" which is generally wanted in a header logo.
DEMO FIDDLE
FULLSCREEN
Have you used the a precentage to set the height of the image in the div?
So set the image height to be say 100% of the div?
If not then maybe you could use some javascript code to detect whether they are on a mobile device, and set the height of it accordingly?
The hard coded height value is messing you up. Try playing with the height: 290px value and watch the header fit properly on smaller screens.
Instead of a background image, you can try putting the image in the html and using a CSS property to help the content scale down on smaller screens.
img {
max-width: 100%;
}
This is a particularly strange request, but the client won't budge.
I've almost got what I need currently with:
#main_content, .slide {position: relative; min-width: 1200px;}
.slide_layer {position: absolute; height: 100%; width: 100%; top:0; left: 0; min-width: 1200px; padding-bottom: 18px;}
.slide_layer img { width: 100%; }
Problem is, if my browser window is longer than it is wide, I end up with empty space below the image. What the client wants is for the image to fill all available height if there is room and create horizontal scrollbars as needed (rather than crop).
The solution I'm thinking of doing is just detecting browser window and stretching the .slide_layer img to fill height via javascript. But this feels crappy and sloppy. Is there a better way?
To make matters worse, backward compatibility is required back to IE7.
Thanks!
This doesn't necessarily help you with the horizontal-overflow request from your client, but you could rebuild your slides to use a background image, instead of an image within it.
You can then use the CSS3 background-size, set to 'cover':
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
This means that the background image will stretch out - whilst maintaining the correct dimensions - to fill the parent. So, unless your slide is exactly the same dimensions as the image, you'll either have a little off the top/bottom, or left/right cut off from view, but it will always stretch to cover the entire background.
This is a CSS3 property, so won't work back to IE7 without a little help. Fortunately, CSS3 PIE can help you out there to get support all the way back to those older versions of Internet Explorer.
What I want is for the background video to fit the screen lengthwise(y) and crop sides widthwise(x) when less than the ratio. As it is now, when someone is looking at in in a long skinny browser, half the video gets cut off on the right rather than both sides being shrunk and centered on the middle. Alternatively I would like the whole thing to stretch in every direction and fit the browser, but I've also searched every page about that and none of the commands seem to work... I dunno maybe less has a new command, but I can't find it...
I am editing the .less file to accomplish what I need and almost all of the css commands seem to work except the one I need or at least, not anywhere I've tried putting it... still not sure what the difference between css and less is aside from newer/better. Here's what I have, it's the best I've found so far. it shrinks to the middle at least when it gets small:
// Background
#rt-top-surround {
position: relative;
video {
position: fixed;
width: auto;
height: 100%;
min-width: 100%;
-webkit-background-size: cover; }
-moz-background-size: cover; } these do nothing at all
-o-background-size: cover; } neither does background-size: 100%;
background-size: cover; }
.backface-visibility(hidden);
}
No matter what I do I can't stop it from preserving the aspect ratio. Any help for either full screen or centering the background video will do. Thanks in advance
-Scott
(I have only been teaching myself how to program websites over the last 2 days so I may not understand everything you say. Please keep that in mind. However, I did program and re-write a site from a template since then and I have been through every single file on ftp and read through the css just to learn what I can. I actually know a pretty decent amount)
You starters your CSS is invalid, #rt-top-surround isn't closed off so anything under that is broken.
// Background
#rt-top-surround {
position: relative;
} /* <------ here! */
As for background-size, this only applies to background-image not a video element. You can simply set width to whatever you want and because height:auto is applies be default it was scale with aspect ratio.
jsFiddle
HTML
<video>
<source src="http://www.quirksmode.org/html5//videos/big_buck_bunny.mp4" type="video/mp4"></source>
</video>
CSS
video {
width:100%;
}