I'm making a slider using css3 transitions. Each slide has a different height (it could contain text/images/videos/mix all of it), width is the same but responsive (100% of the parent).
<div class="slider">
<div class="slide_container">
<div class="slide current">Different amount of content</div>
<div class="slide">Different amount of content</div>
<div class="slide">Different amount of content</div>
</div>
</div>
At the moment I make it work only with absolute positioning and fixed height.
Please see http://jsfiddle.net/j6eWG/1/
Is there any way I can wrap my .slider around slides that will not have fixed height?
I need to make .slider the same height as .slide.current (http://jsfiddle.net/j6eWG/2/)
Maybe there is some transform property I can use?
Related
I want to create a fullheight layout with a top navigation bar, middle area and footer. The Top Navigation and Footer should always stay at the top and bottom, respectively. The layout I managed to create looks somewhat like this:
I implemented this with:
<section class="hero is-fullheight">
<div class="hero-head">
<the-navbar></the-navbar>
</div>
<div class="hero-body">
<div class="container">
<dashboard/>
</div>
</div>
<div class="hero-foot">
<tab-navigation></tab-navigation>
</div>
</section>
The problem now is that when I have other elements than the <dashboard/> in the hero-body (like a long list of boxes) the fullheight layout is lost, making the site longer than the display height. How can I make the hero-body div scrollable? I tried adding overflow: auto; but that doesn't work
Apply height or max-height for hero-body and then apply overflow: auto;. May be you can hide overflow-x(overflow-x:hidden) and apply scroll only vertically by overflow-y:auto.
I have a that is changing in width (col-x) and in height (h-100) depending on the browser window. Inside that div is a very large image being displayed. The problem with .img-fluid is that it is only constraining in width, depending on the container. But I need a solution that also scales height, when the size of the container div shrinks. But I have not found a solution.
I tried different combinations of min-height, max-height, object-fit and so on, but always the image does not shrink in width, when the container gets smaller (or then when the proportions of the div change from portrait to landscape it does not follow.
I tried to build a basic plunker to demonstrate using vh for the height of the wrapper. So the goal would be for both images to always stay inside the column. You can try playing around with the height and width of the browser to see the effect.
<div class="wrapper">
<div class="row h-100">
<div class="col-4">
<img src="https://i.stack.imgur.com/2OrtT.jpg" class="img-fluid" />
</div>
<div class="col-8">
<img src="https://i.stack.imgur.com/2OrtT.jpg" class="img-fluid" />
</div>
</div>
</div>
Styles:
.wrapper {
height: 60vh;
}
https://plnkr.co/edit/LbavqYXNNVlftUOw4Xfr?p=preview
Add css height:100%; for image
I've asked similar question here: CSS: How to shrink first div in container instead of going outside of container (second container should be shown just after first), but that's one is more difficult, I find out that I can't use overflow hidden for it because there are popup in elements. Here description: I have several containers and need shrink only first div if not enough space for all of them, here example which works perfectly for me in Firefox and Chrome, but not in IE: https://plnkr.co/edit/Fg5P96r75soAVlDUf1LG?p=preview:
<div class="container">
<div class="container2">
<div class="first">first div content</div>
<div class="second">second div content</div>
</div>
<div class="third">third div content</div>
</div>
Is there any simple solution to fix it in IE 11?
I have a set up in wordpress using bootstrap what follows:
<div class="container">
<div class="row">
<div id="NEEDS TO BE FULL WIDTH>
</div>
</div>
</div>
I would like the background of the "NEEDS TO BE FULL WIDTH" div be full browser width but not sure how. If I make it more the 100% width it makes a horizontal scroll. Any ideas?
You can have multiple .container elements inside your html. If you change the .container into a container-fluid the content of the container will take up 100%
If you only want the background to be full width, but you want the content to be constrained by the .container (at most about 1140 pixels wide) then surround the .container with another <div> and put the background-image on that element.
i use bootstrap for fluid grid system.
i have a div with class .span6 and i set heigth:200px for this.
now i want when window is re-sizing the div's height decrease like as width.
http://jsfiddle.net/prince4prodigy/X8zu8/
<div class="container-fluid">
<div class="row-fluid">
<div class="span6"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>
</div>
That depends what will be in the divs and how the site is designed...
If you just want to decrease the size than you have to make it via JS, or start positioning your elements absolute.
If the site is designed to be 100% height of the window, you can make the elements absolute and it will be easy.
But if the site isn't 100% of the window height, than the only solution is via javscript.
I don't understand why to use JS. On window re-sizing, i would probably prefer media querys for the div's.