I have a parent div that does not resize accordingly with a responsive image width is set to 100%. The height of the parent div is set to 300px but when the image resizes, the div stays at 300px and leaves a big space between the image and the container content. I have tried:
.bannercon {
/*height: 300px;*/
padding: 1em 0;
overflow: hidden;
}
I have created a fiddle to show the problem.
https://jsfiddle.net/volterony/hhyswzw3/
The question is how can I get the image's container div to also resize accordingly so no gap appears between the image and the text?
Cheers
Just remove the fixed height. It will be relative to the image anyway.
Than you have to make the div between the image und ".bannercon" div position relative so it also has the height of the image.
so remove
#header-fade-0 {
position: absolute;
}
and alter .bannercon css rule like this
.bannercon {
padding:1em 0;
overflow: hidden;
}
Here's an updated fiddle:
https://jsfiddle.net/hhyswzw3/8/
Your div size can't be auto resized if you define height to 300px,try to change div´s CSS to
div {
min-height: 300px;
}
Related
i've been trying to properly set the css properties to have a ng-bootstrap carousel image fit into a given space (div) inside a custom ng-bootstrap modal. Watch this forked stackblitz code.
As seen in the sample source, the image overlaps the given space (height) of the modal as well as the col-8 where it is placed.
How do i make carousel follow the size of its parent col-8? so as to not overlap with modal size.
UPDATE
For those who can't see the issue, you can visit the actual app here
After some trial and error, i've come to this point. Only carousel-inner and its children does not follow its parent div which is ngb-carousel.carousel-modal. See this image below
As shown in the image above, i can't make carousel-inner follow the size of its parent ngb-carousel.carousel-modal which already follow the modal height. it always overlaps and extends over the carousel-modal height. Do note that i set them to max-height:100% to make it responsive.
Basically you just need to bring height 100% down the hierarchy of tags.
To set the modal-body height I set 100% - Modal Header Height (69px).
.modal-body {
height: Calc(100% - 69px);
}
ngbd-modal-content, ngb-carousel, .carousel-inner, .modal-body .row {
height:100%;
}
Stackblitz: https://stackblitz.com/edit/angular-csyyp8-heb7xf?file=styles.css
Give the image a fixed height within the container (that has a fixed height too). Then position the carousel caption accordingly, like so:
img {
height: 650px; /*adjust for your project*/
width: auto !important;
}
#media only screen and (max-width:767px){
img { width: 100% !important
}
}
.carousel-caption {
position: absolute;
bottom: 20px;
left: 3%; /*adjust for your project*/
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
max-width: 50%; /*adjust for your project*/
}
Play around with the values til it fits your needs.
After hours of understanding height, max-height and its relation to its parent tag. I've came up with the fix. see updated stackblitz here.
Basically, i made the image resize to fit in parent content giving the parent content as well as the img a fix height. Therefore, it will make the image auto resize to fit its parent div.
I'm working on a mobile site that has a structure that looks something like this:
body
---->Mobile container div (height 100%)
-------->Full page div (height 100%)
------------>Vertically centered div (height 200px)
My problem is that the full page div level comes out as 0px. Here's the relevant CSS:
html, body
{
height: 100%;
margin: 0;
}
.mobile
{
min-height: 100%;
}
.full-page
{
height: 100%;
position: relative;
}
.center
{
height: 200px;
top: 50%;
margin-top: -100px;
position: absolute;
}
The mobile container is filling the window height, but the full page (100% of the height of the mobile container) is being rendered at 0px height, which ruins the vertical centering.
Why is this happening?
JSFiddle
The red div is the mobile container
The yellow div is the full page div (it's not visible because it's 0px tall)
The green div is the vertically centered div
This is happening because of the following rule:
.mobile {
min-height: 100%;
}
Here's why.
CSS specs tell us the following about percentage height:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.
This applies to your .fullpage container. You can see that the parent container of .fullpage, which is .mobile, does not have a height set explicitly, but rather via the min-height property:
The min-height property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.
You would think that the child container, .fullpage would take the min-height property into consideration when determining its height, but it does not. Browsers will not set the child element’s height (specified in percent) based on its parent’s computed height if only min-height is used.
To correct this, you could add height: 100% to:
.mobile {
min-height: 100%;
}
i am using a container made by myself, but, when i resize the browser window, the container moves along window, i want it static in your place.
this is the CSS:
.container {
margin-right: auto;
margin-left: auto;
width: 1000px; /* yes, because style of PSD file. need follow design */
}
margin: auto centers the .container based on the width of its parent element.
.container has a parent element with a fluid width (e.g. 100%). The width of this element changes when you resize the window, so your container will automatically recenter according to that new width.
There are a few solutions to this:
1) Wrap .container inside an element with a fixed width that won't change on browser resize.
CSS:
.wrapper-fixed-width {
width: 500px;
}
HTML:
<div class="wrapper-fixed-width">
<div class="container bg">The parent element has a fixed width (pixels)</div>
</div>
2) Set a fixed margin size to .container
CSS:
.container {
margin: 0 50px;
}
Here is a JS Fiddle that shows these examples:
http://jsfiddle.net/vH49a/4/
I have a footer i created for a website, but for some reason when i change the width of the window the background image seems to just disappear throughout the right side as i'm shrinking the width of the window.
The footer is supposed to stretch 100% accross the bottom of the screen and does so until i start shrinking the width of the window to a certain point.
You can see an example of my issue Here
Any ideas how to fix this? I am totally stumped. Maybe i did something wrong with width?
The width of #footer is set to auto, and the content within (#content-wrapper) has a fixed width.
This is causing the horizontal bars to appear.
To solve this, you can set overflow:hidden to the parent div (#footer).
Try this:
#footer {
background-image: url("images/footer-bg.png");
background-repeat: repeat-x;
height: 451px;
margin: auto 0;
width: 100%;
overflow: hidden; //What you're looking for.
}
If you also want the inner div (#content-wrapper) to dynamically resize itself, use a percentage, instead of a pixel dimension for width:
#footer #content-wrapper {
height: 451px;
margin: auto;
width: 83%;
}
Hi i have check to your demo page you have define your footer width 1265px and now
than your define min width your html or body as like this
body, html {
min-width: 1265px;
}
because your max width is 1265 define to your footer so that you define same width your body or html
I have two divs wrapped by another div. One of the div's is a header, the other will contain an image. I want the content div to wrap the with the correct aspect ratio of the image.
The wrapper div has minimum widths and heights specified. The image can have an arbitrary width specified. The height of the content div should adjust depending on the image height.
It works fine in FF, but in IE6 the header width does not change when the wrapper div changes to accommodate the specified image width.
Here's a fiddle. fiddle
Here's a picture of the problem: Image
In IE6, the header element is going to take up the amount of space defined by it's container element. In this case #testWrapper, which is set to 100px. IE6 won't play very nicely with absolutely positioned elements or floats with widths set to auto. I'd suggest defining the width that you want in #testWrapper and setting the img to 100%, if possible.
#testWrapper{
position:absolute;
bottom: 0;
left: 0;
margin: 5px;
border: 1px solid black;
width:150px;
}
#testHeader {
background: blue;
height: 10px;
}
#testContent {
background: black;
}
#testimage {
display: block;
width: 100%;
}