I have been messing around with a background carousel and the only issue I have is that when the images slide in, the height is adjusted in a glitchy kind of manner. How do I fix this issue?
For reference, my webpage is here.
Here is my carousel css:
.carousel-item,.active{
height:100vh;
width:100%;
overflow:hidden;
margin:0;
padding:0;
-webkit-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
It's because you have this:
.img-slide {
width: 100%;
height: 100%;
}
and you should have this:
.img-slide {
width: 100%;
height: 100vh;
}
this makes the height consistent. 100vh on the div that contains the image get's applied when the slide is already in the final position, that's why the image size "jumps".
It looks like your selectors are wrong for the way your HTML is setup.
Should be .carousel-item not .carousel,.item.
Just remove the height:100vh and put this css
.carousel-item.active {
display: block;
height: auto;
}
Hope this helps!
To solve your current page problem you can do following css code
.carousel-inner{
height:100vh;
}
.carousel-item{
height:100vh;
}
Add 100% height on both carousel-inner and carousel-item.
Related
I am developing a website and I have a slider with photos of people, that on click (using and event listener) displays a new section that was on display:none and it is 100vh and 100vw, which is great on desktop, but on mobile the text does not fit in 100vh and I want to make it scrollable, but it being a fixed section I do not know how.
(This is for a client and all the data is protected but here's my css now:
#media(min-width: 768px){
#sectionFranck{
position:fixed!important;
background-color: #000000d9;
display:none;
width: 100vw;
height: 100vh;
z-index:20;
top:0;
left:0;
transition: 0.5s;
animation-name:opacity;
animation-iteration-count: 1;
animation-duration: 0.4s;
}}
#media(max-width: 768px){
#sectionFranck{
position:fixed!important;
background-color: #000000d9;
width: 100vw;
z-index:20;
display:none;
top:0;
left:0;
transition: 0.5s;
animation-name:opacity;
animation-iteration-count: 1;
animation-duration: 0.4s;
}}
I have tried using Height:auto or more than 100vh but nothing makes it scrollable. I saw in some other threads that it should help making it Absolute instead of fixed but it only sends it to the top of the page, using top:0 and it is still not scrollable.
height: auto; Height:150vh; Position:absolute; . Nothing worked for me
It's difficult to understand what exactly you are trying to do as you haven't provided any HTML-code. That being said, have you tried putting a <div> element around the section you want to be scrollable? That way you could make the outer-div 100vh and the inner-div as high as you want to after which you can use overflow-y: scroll on the inner-div so you can scroll through the content.
I have the following question. How to make image half visible with
CSS?
It should look like that:
When I'm moving the image to the right with margin-right 100% for example, there is a horizontal scroll, but how to make image split?
.logo{
opacity: 0.03;
z-index: -1;
margin-top: -70%;
margin-left: 90%;
}
You can use what you did with margin-right 100%; but you will also have to specify overflow-X: hidden; on the body or the parent container.
But there is probably a much more practical way to do it
Try use the transform property; reminde to set overflow-x: 0, on parent container.
body{
overflow-x: hidden;
}
.logo img{
z-index:-1;
position:fixed;
right:0;
top: 25vh;
transform: translatex(50%);
opacity:0.25;
}
I'm building a web application in which I want a specific element to scale relative to it's parent. As far as I know, the only way to achieve this without using javascript is to use an image with the desired aspect ratio (there have been several other Stackoverflow posts about this issue), which is what I have done, so basically this:
div { height:20%; display:inline-block; }
div img { height:100%; }
This causes the div to scale the way I want, but the problem is that when the browser is resized, the width of the image changes, but the width of the div doesn't.. After refreshing the page, the element will be scaled properly again.
I've made a working example here: https://jsfiddle.net/r1efuzmb/ You can see the issue when you resize your browser or the "output" column on the Jsfiddle website.
Some notes:
The issue only occurs in Chrome and IE. In Firefox and Safari the div is scaling correctly.
I could use vh-units to set the width, but since I'm trying to scale this element relative to it's parent and not the viewport, it's not really ideal.
Does anyone know if this is a browser issue and/or if there's a way to work around this?
Thanks!
You can use padding-top on the before pseudo element to get the same effect as if you would have used an image.
div img {
height: auto;
width: 100%;
}
The image will fill the container with its proper aspect ratio.
I think that by using float and let the image-container always be 20vh could be a possible solution in your case.
html, body {
height:100%;
margin: 0;
}
.card-container {
height:20vh;
display:inline-block;
background-color:red;
position: fixed;
bottom: 0;
width: 100%;
background-color:lightgray;
}
.cards{
height: 20vh;
display: inline-block;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.cards:after{
content:"";
display:block;
clear:both;}
.cards img {
display: block;
float: left;
height:100%;
width:auto;
padding:0 2px;
}
<div class="card-container">
<div class="cards">
<img src="http://lorempixel.com/100/150/">
<img src="http://lorempixel.com/100/150/">
<img src="http://lorempixel.com/100/150/">
<img src="http://lorempixel.com/100/150/">
</div>
</div>
I have a small issue with some code. I am trying to achieve the effect of image resizing done with css, in a small slider. The thing is that the image is only shown inside the frame it's into.
How can i make it work to display the image in it's full size?
The page i am trying to implement this is here, on the first slider.
Thank you!
img {
position: absolute;
transition: all 1s;
width: 30vh;
height: 30vh;
margin: 5vh;
}
img:hover {
width: 70vh;
height: 70vh;
margin: 15vh;
}
<img src="http://2.bp.blogspot.com/-AXkkbmFRErs/TjCZIWGawfI/AAAAAAAAAlk/lT8yTGBYh38/s1600/Rick-Roll3.png">
<br><br><br><br><br><br><br><br><br><br>
Hover over me, please!
Is this essentially what you are looking for?
I have two columns for my website and right now the background color ends at the last piece of content in the left column (which is for navigation).
I've tried height:100%, min-height:100%; etc. Doesn't seem to work. here's the css.
.container {
width: 100%;
height:100%;
min-width: 960px;
background: #fbf6f0;
margin: 0 auto;
overflow: hidden;
}
#sidebar1 {
float: left;
position:absolute;
width: 20%;
height:100%;
min-width:220px;
background: none repeat scroll 0% 0% #007cb8;
z-index:9999;
}
Use viewport height - vh.
.container {
height: 100vh;
}
Update
Please note, there are potential issues with using VH on Safari iOS. See this thread for more information: Chrome / Safari not filling 100% height of flex parent
Set the body height too
body,html{
height:100%;
}
div {
height:100%
}
The reason the div doesn't fill the entire window by default if because it's parent, the <body> tag probably, only stretches as heigh as it needs to. Add this at the top of your stylesheet (I like to order styles in a similar order to that of the tags in the markup):
html, body {
height:100%;
min-height:100%;
}
edit: grammar
overflow-y: auto;
This css code is for your solution.