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.
Related
I'm learning CSS and got stuck creating a layout that contains a header and an image that fills the rest of the screen. Using the following code, I'm able to achieve what I'm looking for:
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.image-container {
flex: 1;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
<html>
<body>
<div class="container">
<div class="header">
<h1>Test Page</h1>
</div>
<!-- <div class="image-container"> -->
<img src="https://picsum.photos/500/300"/>
<!-- </div> -->
</div>
</body>
</html>
Now the problem is that I want to wrap the image element into a div as I'd like to position an overlay on top of the image. As soon as I nest the img within a div, the resizing doesn't work properly anymore. If the screen is wide, the image overflows to the bottom, creating a vertical scrollbar.
I've tried a lot of things, but nothing's worked so far. Can you explain to me why introducing the div (image-container) changes the layout and how to make it behave like the version without the div? That'd be great, thanks in advance!
EDIT:
I want the image to be displayed exactly like in the snippet I posted. It should be as large as possible, but only so large that the whole image is still visible and nothing is cropped. For a wide window, there should be blank bars left and right of the image. For a narrow but tall window, there should be blank bars above/beyond the image.
My issue is that as soon as I add the <div class="image-container">, the image always takes the whole width. For a wide window, I get scrollbars and can't see the whole image anymore. I'd like to know how I can get the image to scale like in the version without the additional <div>. I'd also like to understand why adding the <div> changes how the image is scaled.
EDIT 2:
Someone suggested to add overflow: hidden; on .image-container, but deleted their answer. This does in fact work (overflow: hidden/scroll/auto; work, overflow: visible; does not), but now I'm completely confused to why that's the case. I thought that overflow would control if overflow is visible, but wouldn't affect the size of the content being displayed. In this case though, it seems like the overflow property does have an effect on the size of the picture being displayed. That's weird and if anyone knows what's going on, please let me know!
Flex is already helping the image take up as much space as possible, so the height: 100% and width: 100% were causing the image to grow.
For getting something to appear on top of the image, I would recommend looking into position: absolute or position: relative
html,
body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.image-container {
display: flex;
justify-content: center;
}
img {
object-fit: contain;
}
<html>
<body>
<div class="container">
<div class="header">
<h1>Test Page</h1>
</div>
<div class="image-container">
<img src="https://picsum.photos/500/300" />
</div>
</div>
</body>
</html>
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'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;
}
}
I am trying to put an image into my Website.
The image is in a div that hast got a fixed size.
The Problem is that the image stretches the whole div
when I use auto height in CSS.
The Image fits into its div setting its height and width to 100%:
Now I would like to keep the Image unstretched.
So I set the width 100% and the height as auto
as it is described here
After setting that the image is in a layer under the section below
but layers on the next part of the page.
here is the HTML Code I used:
<div class="section4">
<section class="half">
<div class="officePicContainer">
<img src="officePic.jpg" alt="New Office of MEGO" class="officePic">
</div>
</section>
<section class="half">
</section>
</div>
And The CSS Code:
.half {
height: 50%;
position: relative;
}
.half:first-child {
}
.half:last-child {
background: #950049;
}
.officePic {
height: auto;
width: 100%;
}
How can I resize the image and fitting into its parent div without stretching it? Is it still possible in CSS? Or is Java Script needed?
Thanks for help!
Create div and, the background-size:cover css tag and set position: fixed
<div class="demo" style="background-image:url(example.png);background-size: cover; background-position:center center;"></div>
<div><img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" width=100% /></div>
I have a two column layout, one column is the document content and the other is the navigation. I've set this up using a Bootstrap row, one column is 8 units wide and the other is 3 units wide with an offset of 1 unit. I've set the navigation content to fixed so that it stays on the page.
On some of the pages I want to have an image at the top of the navigation column. I want this image to be responsive and stay within the 3 unit column and be fixed along with the navigation. However, when you set the content to fixed the image is no longer constrained within the 3 unit column.
I've set up a jsfiddle of the problem at http://jsfiddle.net/yKUZW/3/.
Here is the example html:
<div class="container">
<div class="row">
<div class="col-xs-8 content">Content goes here...</div>
<div class="col-xs-3 col-xs-offset-1">
<div class="fixed">
<img class="img-responsive" src="http://placekitten.com/300/200">
Some links go here.
</div>
</div>
</div>
</div>
And the relevant css:
.fixed {
position: fixed;
top: 150px;
}
Notice that when the page is resized horizontally the image stretches outside of the light grey container area. What I want is for the right hand side of the image to always align exactly with the right hand edge of the container, resizing the image as needed.
How would I go about accomplishing this?
The Problem
Ignore the image for a second... .img-responsive just makes the image take up 100% of the available space in the parent container.
Then the question becomes, can I add position: fixed to a div and still have it take up the same width as it's parent which has .col-xs-3 (width: 25%)? Once we resolve that, the image should fall into line.
As you may already know about fixed positioning:
for a fixed positioned box, the containing block is established by the viewport
Meaning Fixed is always relative to the parent window, never an element.
Simple Solution
If the viewport is the same width as the parent div, this can be resolved trivially:
HTML:
<div class="row">
<div class="col-xs-9" id="content">C</div>
<div class="col-xs-3">
<div id="navbar">Navbar</div>
</div>
</div>
Relative - div takes up 100% of width of parent (.col-xs-3):
#navbar {
background: yellow;
position: relative;
}
Fixed - div takes up 100% of screen - apply .col-xs-3 width ourselves:
#navbar {
background: yellow;
position: fixed;
width: 25%;
}
Demo in Fiddle
Better Solution
However, that solution isn't much help to us because the the .container class applies variable widths at different breakpoints to the row. This causes 25% of the parent div and 25% of the viewport to get out of sync.
So how can we get them to sync up again?
To answer that, let's look at exactly what .container is doing:
.container {
#media (min-width: #screen-sm-min) {
width: #container-sm;
}
#media (min-width: #screen-md-min) {
width: #container-md;
}
#media (min-width: #screen-lg-min) {
width: #container-lg;
}
}
So instead of trivially being able to apply a 25% width, we now have to mimic the width applied by .container. Here's how:
Here's some sample markup:
<div class="container">
<div class="row">
<div class="col-xs-8 content">Content</div>
<div class="col-xs-3 col-xs-offset-1" id="sidebar-outer">
<div id="sidebar">
Width: <span id="width-placeholder"></span>px
</div>
</div>
</div>
</div>
Now we can apply a width at all breakpoints with the following CSS:
#sidebar {
background: yellow;
position: fixed;
width: 25%;
}
#media (min-width: 768px) {
#sidebar {
width: 158px; /* 632 * .25 */
}
}
#media (min-width: 992px) {
#sidebar {
width: 213px; /* 852 * .25 */
}
}
#media (min-width: 1200px) {
#sidebar {
width: 263px; /* 1052 * .25 */
}
}
Here's a side by side comparison of using relative vs fixed position with styling:
Demo in Fiddle
Back to our problem at hand:
Just take the demo from above and add back in our responsive image:
Solution Demo in Fiddle
As a note: most sites opt to use a fixed width side navbar when using position:fixed in order to sidestep these kinds of issues.
After messing with it a bit I believe the best way would be to remove the the fixed div from the bootstrap column, and place it higher up in the dom, or at least outside of the row. There is a lot of negative margin and strange padding stuff going on to get the BS cols to work properly and it is pushing your fixed div around. If it were me and this was going to be a main feature on the site I would make a div with width 100%, abs pos, top left right bottom all at 0, and then place the fixed div inside of that. For a fixed pos div you want it to live in a relative pos parent with right set to 0 and top set to 150 in your case. If the parent is 100% of the windows width then you have pretty good control over where it goes using either px or %.
Thanks Kyle for the amazing solution you described at the top.
Here is a solution for 8/4 situation in a normal container (not fluid)
<div class='container'>
<div class='row'>
<div class='col-xs-8> something here </div>
<div class='col-xs-4>
<div id='sidebar'> content
</div>
</div>
</div>
</div>
and here the css
#sidebar {
background: blue;
position: fixed;
width: 33.3333%;
}
#media (min-width: 768px) {
#sidebar {
width: 235px;
}
}
#media (min-width: 992px) {
#sidebar {
width: 309px;
}
}
#media (min-width: 1200px) {
#sidebar {
width: 375px;
}
}