I'm Making a BS Carousel. Images look out of place and don't cover carousel completely when browser is smaller and text doesn't stay centered. How can I figure this out? I haven't found an answer that could help me.
This is my CSS:
.carousel-inner {
height: 400px; }
.carousel-caption {
padding-bottom: 30%;
}
Here is the site: ' http://machinist-alec-32224.bitballoon.com '
Well at the moment your .carousel-caption has bottom padding set at 30%. On bigger screens that padding moves caption out of carousel. You should change that to a margin.
Also, your images stretch because you gave them fixed height but in the same time you expect them to stretch till they fill 100% of website width. You should set fixed height and on carousel item and not on image.
This CSS should give better results:
.carousel-caption {
margin-bottom: 125px;
}
.carousel-inner> .item {
margin: 0 auto;
height: 500px;
}
.carousel .item > img {
height: auto;
min-height:500px;
min-width: 100%;
}
You need to made the image resonsive. Something like that:
<img src="IMAGE LINK" border="0" class="responsive-image" alt="Null">
.responsive-image{
height:auto;
width:100%;
}
Related
How can I have a div with height 100% filling the viewport AND a second div (positioned absolute) covering the entire page (a dropdown)?
More info: I have a div on my homepage containing a hero image. The div needs to fill the viewport. Below the hero div is more content. I have the following code:
html { height: 100%; }
body { height: 100%; }
.hero { height: 100%; }
I would prefer to use height:100% than height:100vh because on tablets and phones (in Chrome) the viewport height changes when scrolling and in iOS Safari the bottom of the hero div is hidden behind the apps controls (bookmarks etc) when using 100vh.
The above works fine for the hero image div. BUT I have a drop down menu/nav bar. The dropdown needs to have a height of the entire page, not just the viewport. The menu has an absolute position. If I set the height to 100% it only covers the viewport height, not the entire page. The same is true if I set top:0; and bottom:0;.
How can I do this? Thank you
First pic shows the hero div in blue with a height of the screen (minus the header). There is more content below the 'fold'.
Second pic show the drop down menu which should cover the entire height of the page. Hence the white drop down will have considerably more height than just the hero div.
The inner element's height 100% means it will occupy its container. If you want to occupy the entire page, you have to use top:0, left:0 and in JavaScript, use innerElement.style.height=document.body.style.height;
Previous snippet might not work
You should use clientHeight
innerElement.style.height=document.body.clientHeight
You can use 'vh' and 'vw' instead:
100vh - 100 virtual height %
100vw - 100 virtua width %
You can use this:
function openMenu(){
document.getElementById("ddl").style.display = "block";
}
function closeMenu(){
document.getElementById("ddl").style.display = "none";
}
body{
height: 100%;
display: flex;
flex-direction: column;
padding-bottom: 50px;
position: relative;
width: 300px; /*for test */
}
.menu{height: 50px;} /* first child of body */
.hero{
flex: 1;
background-color:#4de6d0;
min-height: calc(100vh - 50px); /*for test */
} /* second child of body */
.dropDown {
position: absolute;
min-height: calc(100% - 50px);
top: 0;
background-color:white;
display: none;
width: 80%;
}
.dropDown > div{
height: 60px;
text-align: center;
line-height: 60px;
}
<body>
<div class="menu" onclick="openMenu()">Menu</div>
<div class="hero"></div>
<div class="dropDown" id="ddl">
<div onclick="closeMenu()">Close</div>
<div>Work</div>
<div>About</div>
<div>Services</div>
<div>Ethics</div>
<div>Contact</div>
</div>
<body>
Finally I did not understand what you exactly want, But if you want the drop down is the height of screen you can change this property:
min-height: calc(100% - 50px);
to this: calc(100vh - 50px);
In .dropDown styles
From exhaustive research it doesn't seem possible to have one div with a height of 100% to fill the height of the screen and a second div with height 100% to cover the height of the enire page.
I am trying to align a div on top of my image. Horizontal alignment works fine, vertical offset however doesn't. Also, the background-color of #studentenlijn is not applied.
HTML Snippet:
<div id="container">
<div id="studentenlijn">STUDENTENLIJN</div>
<img src="http://lsvb.nl/s/lsvbheader.jpg" class="banner" />
</div>
Relevant CSS
#studentenlijn {
width: 10%;
height: 10%;
position: absolute;
top: 30%;
left: 72%;
background-color: #660000;
}
JSFiddle: http://jsfiddle.net/YGeLA/
Any ideas?
Your body had a height of 0, thus affecting the height of the containers within it when you try to specify a percentage height. Another problem was that you had a floating image within your container div, and thus you need to hide the overflow in order for the container to properly calculate the heights of elements within.
I have made some minor changes to your fiddle here:
http://jsfiddle.net/YGeLA/1/
I added:
height: 100%; to the body element
overflow: hidden; to #container which forces the container to respect the height of all elements within it.
The size of your div is:
#studentenlijn {
width: 10%;
height: 10%;
}
So it'll be a % of the parent element. The parent element, your container, is:
#container {
width: 100%;
height: 100%;
}
At this point, your browser can't determine which size should have your block.
So you won't be able to center it (Since you can't center an element which have not a browser-determined size).
You can't see the background-color for the same reason. It is applied, but you won't see your colored block because his size is 0.
Try to solve it, and it would be easier to center your div. In case it doesn't help you, edit your post with your modification :)
the container height is 0px. so you can't give height 100%
you have to set height in px
look at this update
#container {
position:relative;
width:100%;
height:100%;
line-height: 0;
}
.banner {
width:100%;
}
#studentenlijn {
width:200px;
height:30px;
position:absolute;
top:35px;
left:72%;
background-color:#660000;
line-height:30px
}
http://jsfiddle.net/YGeLA/2/
Hi and thanks for reading, am building this site http://myspacioclub.com and am using a wordpress responsive theme, and I got this image "bannerfb" with class "banner" that was asked for the customer. So inside the space for the logo I create a new div to put the banner and added this properties to the div of the banner:
.banner {
position:relative;
top:-170px;
left:450px;
}
but as the theme is responsive, when i make windows smaller like the size of tablet or cellphone the layout breaks, can someone help me?
How could I fix the theme that only use the banner properties when the window is in a bigger resolution, or any similar solution but the idea is to keep the banner with those properties without been affected by the smaller size.
You can achieve this different ways, but one way is following: First wrap your logo and banner in a div
<div class="wrap">
<div class="logo">
<a href="">
<img src="http://myspacioclub.com/wp-content/uploads/2013/04/Myspacioclub.png"/>
</a>
</div>
<div class="banner">
<img src="http://myspacioclub.com/wp-content/uploads/2013/04/bannerfb.jpg"/>
</div>
</div>
Then add following CSS:
.wrap {
position: relative;
width: 100%;
}
.logo {
width: 50%;
float: left;
}
.banner {
width: 50%;
float: right;
}
.banner img, .logo img {
width: 100%;
height: 100%;
}
You can see working example in here. Also, I have to point out, that at least at the moment you are using more than 7000px width image in your banner. This is NOT what you should do. You banner, at least in with my screen, is 700px wide. DO NOT ever use bigger images than you need. It shows 700px wide image, but you still have to load the 7000px one. Convert to smaller size! If you necessarily need bigger image for big screens, you could use javascript or css #media tag to load different image for different screen size. For that you have to set your banner image as background not as <img> and then do something like this in CSS:
#media only screen and (min-width: 35em){
/* Style adjustments for viewports that meet the condition */
.banner { background: url(path/to/image); }
}
You can set many steps like this. Just add another one, change the min-width and load different image to background.
So in your page you have to do following in CSS:
#media (min-width: 1320px){
.span8 { width:1178px; }
}
.name-logo, .banner { width: 50%; }
.banner img { width: 100%; height: 100% }
.name-logo img { width: auto; height: auto; }
.name-logo { float: left; }
.banner { float: right; }
Trick with responsive layout is to use percentage values not fixed pixel ones and do not use negative margins if possible.
How can I keep the play button centred even if the the image/video size changed?
.image{
position:relative;
width:500px; //changed
height:300px;
}
Here is my example...
Attention: my images/videos haven't no specific size, so they can change according to their own size... This is just an example!
I set up three examples to show how you could solve this problem.
Please see the fiddle: http://jsfiddle.net/audetwebdesign/mxSkQ/
The HTML is essentially yours:
<div class ="image ex1">
<a href="#">
<img src="http://placehold.it/200x150" alt="video">
<span class="play">
<span></span>
</span>
</a>
</div>
I am using a demo image with configurable dimensions, 200x150 for example, easily changed for testing.
Example 1 - Image Size Determines Size of the Parent Container
.ex1.image {
position: relative;
display: inline-block;
margin-left: 50px;
}
.image a {
display: inline-block;
position: relative;
}
/* Gets rid of the extra white space that follows an inline element*/
.image img {
vertical-align: bottom;
}
If you want the .image div to shrink to fit the image, use inline-block to display.
The margin-left is optional, will depend on the rest of the layout.
Important: To center the play button motif, simply set the a tag to display as inline-block and your arrow-motif-span will position itself nicely.
Because img is an inline element, browsers insert a small space after it that can show up if you have borders or backgrounds. Use vertical-align: bottom to clean that up.
Example 2 - Parent Container Has A Specified Width
You can specify a width for the .image parent container and then use text-align to position the image element.
.ex2.image {
position: relative;
display: inline-block;
width: 400px;
height: auto;
text-align: center;
}
Example 3 - Parent Container Has Full Width and Specified Height
In this example, I let the parent container fill up the width of the window and set the
height to 200px. To get vertical centering, I set margin-top to a hard-coded value that will depend on the height of the image. If you let the image take on a fixed height, this example is useful.
.ex3.image {
position: relative;
display: block;
width: auto;
height: 200px;
text-align: center;
}
.ex3.image a {
margin-top: 25px;
}
You need
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; // top and left equal to half of the size * (-1)
http://jsfiddle.net/nGKcn/13/
Try playing with the image size/different images.
Give the image CSS of:
display: block;
margin: 0 auto;
This is just a general way you put stuff in the middle.
Unless I'm missing something maybe?
I have a CSS problem. I have an image that is 1024x500 pixels. Now the problem is, whenever the browser window/viewport changes width below the width of the image(1024px), the image starts to get cut off. Now as you can see, I set the container width to 100% when the viewport size goes below 1024px, and it does resize proportionally, but the sides of my image get cut off more and more as the browser resizes(smaller).
Could anyone help me get my image to resize dynamically pixel for pixel (without losing any of the original picture - no cut offs)?
Check out my webpage and resize the browser window to see what I mean. Pay attention to the sides of the images getting cut away...
HTML: Note my Original image is 1024x500
<div class="ei-slider">
<ul class="ei-slider-large">
<li>
<img src="http://lamininbeauty.co.za/images/large/makeup.jpg" alt="Vertical Sunbed TanCan"/>
</li>
</ul>
</div>
CSS:
The normal CSS for large screens
.ei-slider{
position: relative;
width: 1024px;
height: 500px;
margin: 0 auto;
}
.ei-slider-large{
height: 100%;
width: 100%;
position:relative;
overflow: hidden;
}
.ei-slider-large li{
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
height: 100%;
width: 100%;
}
.ei-slider-large li img{
width: 100%;
}
For when the Browser window goes below the image width: 1024px:
#media screen and (max-width : 1023px){
.ei-slider{
width: 100%;
}
}
For smaller screens when my images are cut off: Note my Original image is 1024x500
#media screen and (max-width: 930px) and (min-width : 831px){
.ei-slider{
width: 100%;
}
.ei-slider-thumbs li a{
font-size: 11px;
}
.ei-slider-large li{
position: absolute;
top: 0px;
left: 0px;
overflow: visible;
height: 100%;
width: 100%;
}
.ei-slider-large li img{ /*HERE IS MY PROBLEM*/
width: 930px;
height: 454px;
}
}
Thank you!
you use:
max-width: 100%;
height: auto;
width: auto; /* for ie9 */
This will make whatever you assign the css to resize dynamically to fit its container based on the max-width: 100% statement. If you would like it differently, change the max width statement accordingly.
I have a simple solution for that. Just give the width parameter in terms of view-port percentage.
Syntax :
width: <Percentage>vw;
Example :
<img src="Resources/Head.png" alt="" style="width: 100vw; height: 85px">
Here, the height of the image is fixed but the width will be resized to 100% of the view-port, whatever its size may be.
Hope this helps :)
I had the same problem because I'm using the same jquery plugin (ie-slider). I found out that the image is passed additional (inline) styles from the Javascript code and in fact it is just shifted-left and not actually cut off. The code passes dynamic values to the tag which are got from the image itself at the time of re/load in a particular viewport width. The author uses this in the .js file.
var $img = $(this);
imgDim = _self._getImageDim( $img.attr('src')); //gets the dimensions from the image
He then gives the image a margin-left like so
$img.css({marginLeft: imgDim.left}); //assigns a new margin-left, overrides any value set for this property in the .css file because it's inline
When the viewport width gets smaller this is always a negative value. The work around is to set
$img.css({marginLeft: 0});
It worked fine for me after, with no arising issues from the change. Good luck.