I'm trying to learn bootstrap and built a website with a video background on top and text below it. When I reduce the desktop size screen to one of mobile size, a large gap appears in between the video and body text. Any help would be helpful in my pursuit to learn boostrap! Thanks so much.
I suspect it's a padding or margin problem? But why would it expand more when I make the browser window smaller?
HTML:
<body>
<div class = "container-fluid">
<div class = "row">
<div class = "header-container">
<div class = "video-container">
<div align="center" class="embed-responsive embed-responsive-16by9">
// video code removed (for succinctness)
</div> <!-- video responsiveness -->
</div> <!-- video-container -->
<div class = "col-md-12 text-center">
<h3>
TEXT
</h3>
</div>
</div> <!-- header-container -->
</div> <!-- row -->
</div> <!-- container -->
<section id="services">
<div class="row">
<div class="col-sm-3 col-sm-offset-2" id="red">
<h2 class="text-center">
Services
</h2>
<p class="text-justify">
// BODY TEXT removed (for succinctness)
</p>
</div>
CSS:
.header-container {
width: 100%;
height: 700px;
border-left: none;
border-right: none;
position: relative;
padding: 0px;
margin: 0px;
}
.video-container {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
z-index: -1;
}
video { max-width: 100%; min-width: 100%; min-height: 100%; }
#services{
background-color: white;
height: 25px;
}
This does not appear to be a padding or margin issue.
You have added some custom CSS that specifies an explicit height on your header-container class, i.e., 700px. At the same time, however, You are placing the video in a responsive container by specifying Bootstrap's embed-responsive class, etc.
This essentially means that the video, IFRAME, or whatever you put within the responsive container will respond to the size of the screen, i.e., as the window's dimensions decrease, so do the content's. The actual height of what is in the container will be shorter as the screen gets smaller, probably a lot shorter than 700px; how short, just depends on the aspect ratio. You could enforce a min-height, specify auto or simply alter the design to flow more naturally, simply applying bottom/top margin as appropriate.
Bootstrap: Responsive embed
It may happen because you are already using the bootstrap class embed-responsive and again defining styles for the video tag. Try removing the styles for the video tag or just the min-height tag. That may be causing the problem
change the height in your header-container css class.
height: 700px;
change
height: auto;
You'll probably have to use media queries to adjust the container .head-container size.
Try something like:
#media (max-width: 1170px) {
.header-container {
height: 250px;
}
}
Related
I have six of my portfolio images (of kittens). How do I stack six of them on top of the lake wallpaper? I don't want there to be any white space, just the word "Portfolio" and six kittens on top of the lake, followed by the grey background section of the website.
Portfolio - How do I make six kitten photos on top of the lake img?
About - Grey background with white font and profile pic (Already done)
Contact - Contact form (Already done)
I've read about z-index, and tried background-size: cover and contain, but it doesn't seem to work... Can anyone explain all this to me?
HTML
<header id="portfolio" class="container-fluid">
<div class="container">
<h1 class="font-italic">Portfolio</h1>
<div class="row">
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio1" class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio2" class="img-thumbnail>
</div>
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio3" class="img-thumbnail">
</div>
</div>
<div class="row portfolio-buffer">
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio4" class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio5" class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio6" class="img-thumbnail">
</div>
</div>
</div>
</header>
CSS
.portfolio-buffer {
margin-top: 30px;
}
section {
padding: 85px 0;
}
footer {
padding: 40px 0;
}
#portfolio > img {
margin-left: -15px; /* Compensate for the container */
width: calc(100% + 30px); /* Compensate for the container */
}
https://codepen.io/jenlky/pen/GMENBL/
You have numerous problems with your fiddle:
Your .wallpaper selector doesn't actually have a matching element; you have no element with a class of wallpaper.
You are using Boostrap's container-fluid, but not using a column-based layout. Your elements in this container that are not in Bootstrap rows (such as this background) need to have margin-left and margin-right of -15px to accommodate for Boostrap.
You have rows that have combined columns counts other than 12.
Most elements overflow their container.
As for the background not working with background-size, that is because background-size requires a background to operate, added via a CSS property like background: url(background.jpg). You are simply using an <img> tag.
Having said that, all you need to do is make sure that your image has a max-width of 100%, to ensure that it stays within the bounds. You'll probably also want to make it fixed to the page, which can be done with position: fixed.
I've created a new selector based on your current structure, and added the relevant properties:
#portfolio > img {
margin-left: -15px; /* Compensate for the container */
margin-right: -15px; /* Compensate for the container */
max-width: 100%;
position: fixed; /* Optional */
}
This can be seen working here.
Note that you'll probably want to add max-width: 100%; and max-height: 100%; to all images, to ensure that they don't go outside of their container.
Update
In order to have the background only cover the portfolio section, you'll want to remove position: fixed (to give it the default position relative). You'll still want to keep the negative left margin, but you'll want to make it 100% of the width of the container plus 30 pixels in order to compensate for the padding and offset. That can be done with a CSS calculation:
#portfolio > img {
margin-left: -15px; /* Compensate for the container */
width: calc(100% + 30px); /* Compensate for the container */
}
I've created a new pen showcasing this here.
And again, note that you'll probably want to set a max-width of 100% on all images, and you should set margin-left (and technically margin-right) on all elements that are directly under a Bootstrap column. For example, the cats can be fixed with:
.col-md-4 > img.img-absolute {
margin-left: -15px;
margin-right: -15px;
max-width: 100%;
}
Hope this helps! :)
Ok thanks to Obsidian Age for giving me the idea of using background-image instead of img src="...". So I removed img src and added this in:
header {
background-image: url("https://wallpaperscraft.com/image/forest_lake_reflection_island_mist_97668_1920x1080.jpg");
padding: 85px 0;
background-repeat: no-repeat;
}
That works and solved the problem I had. I've updated in my codepen (https://codepen.io/jenlky/pen/GMENBL/). Cheers!
I'm having some problems with two horizontal divs maintaining the same height.
If both contain an image it's fine, but as soon as I try to embed a youtube video in one of the divs the height starts to mismatch as the viewport is decreased.
The code used is this:
<div class="IndexBanners">
<div class="bannerimages effect first">
<iframe class="embed-responsive-item" frameborder="0" src="https://www.youtube.com/embed/GfaiXgY114U" height="99%" width="100%">
</iframe>
</div>
<div class="bannerimages effect">
<img src="http://placehold.it/795x436">
</div>
</div>
I've set up a fiddle so you can see the issue.
https://jsfiddle.net/grvbc42o/1/
Any suggestions?
Images are vertically aligned baseline by default and will leave a little bit of space at the bottom of their parent. If you give the image a vertical-align and change the height of the video to 100%, they align properly.
.IndexBanners {
display: flex;
margin-top: 20px;
}
.bannerimages {
flex: 1 0 0;
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
}
#media (max-width:600px) {
.IndexBanners {
display: block;
}
.first {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.first iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
<div class="IndexBanners">
<div class="bannerimages effect first">
<iframe class="embed-responsive-item" frameborder="0" src="https://www.youtube.com/embed/GfaiXgY114U" height="100%" width="100%"></iframe>
<!--a href="http://placehold.it"><img src="http://placehold.it/795x436"></a-->
</div>
<div class="bannerimages effect">
<img src="http://placehold.it/795x436">
</div>
</div>
Is the height defined for your image. I would suggest adding
style="height: 99% width=100%"
within your tag.
If that does not work, I would suggest giving both the iframe and the img tags a mutual class, and defining desired height and width within the class. (and removing the height and width within the iframe tag.
Let me know if neither of those resolves your issue.
The <iframe> is definitely the issue here. They are a bear to work with, when trying to get them to behave responsively. Width is easy, height is not usually.
Following the Intrinsic Ratio technique discussed by Ben Marshall, I edited your Fiddle here: https://jsfiddle.net/grvbc42o/3/. That very much so appears to achieve your goals.
I have noticed, that many websites (SO included) don't shrink to the whole width of the screen, preferring to render content column either of fixed-width or setting max-width property for it. Merriam-Webster dictionary website is a good example for the latter.
Is it possible to create such a layout using Bootstap? I have managed to limit content column width inside it's col-8-md div, but there is a huge gap between content and right sidebar on big displays now.
Live demo: https://codepen.io/anon/pen/dNprzm
HTML:
<div class="row">
<div class="col-md-8">
<div class="content-block">
CONTENT
</div>
</div>
<div class="col-md-4 right-bar">
RIGHT_BAR
</div>
</div>
CSS:
.content-block {
height: 1000px;
max-width: 1000px;
background-color: lightgreen;
margin-left: auto;
margin-right: auto;
}
.right-bar {
background-color: pink;
width: 400px;
}
If I'm understanding your question correctly, you just want to be sure to have a fixed width for your content but get rid of the space that's happening to the right of it on large screens?
Remove your margin-right: auto;. Once you get to a screen size where it's larger than 1000px, it's trying to "center" your .content-block
I have an image as my header and footer and it does not reach the edges on my webpage. If my browser is full screen, it looks good. But if I shrink down the webpage, then it ends up cutting off on the right side before it reaches the edges.
How can I fix this so that no matter the size of my browser, the header and footer reach from side to side 100% of the way?
I have my HTML in a container so that it doesn't change position when I resize the browser. This is the gist of how my CSS and HTML are set up...
Here is a JSFiddle that shows my problem. If you extend the window, you can see that the header/footer takes up every inch that it should. However, if not, you can see the blank space to the right:
https://jsfiddle.net/t5gb4as7/
CSS:
.container {
margin: 0 auto;
width: 1060px;
}
/* header */
h2 {
color: transparent;
background-image: url('header-footer.png');
width: 100%;
height: 102px;
margin-bottom: 20px;
}
/* footer */
h3 {
color: transparent;
background-image: url('header-footer-turn.png');
width: 100%;
height: 102px;
}
HTML:
<body>
<div class="wrapper">
<header>
<h2>test</h2>
</header>
<div class="container">
//more
//html code
//here
</div>
<div class="push"></div>
</div>
<div class="footer">
<footer>
<h3>test</h3>
</footer>
</div>
you can use percentage as width to make it responsive like this
width : 100% ;
I would set the background image on a div, instead of the h2 or h3 tags as you are at the moment. The div width should be 100% and then it will cope with desktop and mobile.
You can use CSS media queries to load in a different background image for different screen sizes if you want to.
#header {
width: 100%;
background-image: url('images/name-of-background-image.jpg');
}
<div id="header">
<h1>Your header info here.</h1>
</div>
I have set the google map to have a height of 85%. If the window is big enough it will have the proper size. But if the window is small it overlaps somehow.
Here some images
When window is big enough:
When window is smaller (no gray border at the bottom):
Some of the code. I use Bootstrap 3
HTML:
<div class="row full-height">
<div class="col-md-12 full-height">
<div class="map-container">
{{> googleMap name="map" options=mapOptions}}
</div>
</div>
</div>
CSS:
html, body, section, .mainpanel, .contentpanel { height: 100%; }
.full-height {
height: 100%;
}
.map-container {
width: 100%;
height: 85%;
position: relative;
}
I wish it would resize properly so it does not overlap.
Any help would be appreciated.
To achieve the effect you are after, you either must use JavaScript to size/resize the map div or use CSS positioning techniques.