I have centered my div ui-content to the middle of my page on a resolution of 1920x1080, but when I check it on a resolution of 1366x768 the div doesn't adjust itself for a lower height. On the 1920x1080 resolution, when I resize the height I have the exact same problem. I would have expected it resize to something smaller, as it does with the background image.
I tried working with the atrribute max-height, but that just adds a scroll bar and does nothing. I also tried Oliviers suggestion, but that didn't seem to do anything either. I created a JSFiddle with the full code here and added the relevant css code below.
element.style {
margin-bottom: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ui-content {
padding-top: .5em;
max-width: 768px;
margin: 0 auto;
background-color: rgba(19, 23, 23, 0.38);
border-radius: 26px;
}
The problem is that he parent div of the ui-content element has no specified height. I made another fiddle to demonstrate:
https://jsfiddle.net/v8exwacj/
Note in the fiddle that the % height element only gains a height when its parent has a specified height, ie height: 200px;
You could remedy this by giving the parent element a specific height, or by using javascript to adjust the height dynamically. The issue is explained in much further detail here: Percentage Height HTML 5/CSS
That answer mentions the following as a solution for modern browsers:
div {
height:100vh;
}
Which would make the div 100% of the viewport height.
Related
So I have a little circle div that says "request invite" which is inside a larger container div.
I want the circle #request-invite div to be positioned in a very particular location (but still flexible and moving with the resizing of the browser window).
At the moment I have got it at the correct location I want, but the position is completely fixed is not flexible with the resizing of the browser window.
Here's what I have:
https://jsfiddle.net/t0j9hwos/
The css that I am struggling with is:
#request-invite {
position: absolute;
margin: 0 auto;
top: -10px;
left: 860px;
width: 100px;
height: 100px;
background-color: white;
border-radius: 50%;
line-height: 100px;
text-align: center;
color: #d31027;
vertical-align: middle;
font-size: 22px;
transform: rotate(10deg);
}
Any ideas how I can get the positioning of the #request-invite div circle how I want it?
Thanks,
Josh
Apparently your present solution fits to a particular window width. Let's say that the window is 1200px wide. So you can convert your left: 860px; to a relative measurement - relative to the window width. Percentage would be the first choice.
So you calculate, which percentage 860px is in relation to 1200px (your assumed window width - replace that with your actual width value). 860:1200 equals 0,716666... , so that's 71,66666 percent.
So instead of left: 860px; you now use left: 71,6666%;, or maybe even better left: 71,6666vw;. As I said, replace the 1200 with your actual window width (at which the positioning works as desired) when calculating that value.
I don't see the circle in your example code.
From what I understand, position:fixed or position:sticky could be what you are looking for.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/position
You could use vw for viewport-width (in percent) and than adjust it using margins like that:
position: absolute;
top: 0;
margin-top: -10px;
left: 50vw;
margin-left: 20px;
jsfiddle Demo based on your code
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've looked around and can't seem to find a solution to the problem.
How come the bottom two divs appear cut in perfect halves to the left and right on a windows 8, but on my android s5 it is not centered?
http://danny4help.com/
#grad4_left img {
height: 100%;
width: 100%;
border-radius: 10px 0px 0px 10px;
}
#grad4_right {
z-index: inherit;
height: 700px;
background-color: #F1EEF7;
top: 705px;
width: 50%;
left: 50%;
text-align: center;
font-size: 80px;
line-height: 40px;
color: #4A4A4A;
}
.grad#grad4_left {
z-index: inherit;
height: 700px;
background-color: black;
top: 705px;
right: 50%;
color: #4A4A4A;
width: 50%;
}
You have several divs that have fixed widths in pixels, both above and below the incorrectly centered divs. These divs are wider than the body, so the viewport automatically expands to show the full width of those elements, making it seem as though your divs are incorrectly centered. Simply replace the pixel units of the width of the too wide divs with either percents of viewport units and you'll be good to go (e.g., .grad has a width of 1280px. Change that to 100vw). For a quick and dirty fix, add this block to the top:
* {
max-width: 100vw;
}
EDIT: Some other answers are advising you not to use absolute positioning in responsive layouts. Using position: absolute is actually OK as long as you are using relative units (e.g., %, em, vw) and not fixed units (e.g., px, in, pt).
Actually it's already centered in mobile. The reason why you see it's not aligned center is because you have set your grid div to width: 1280px while the body element is only 100%. Also as #Michael_B mentioned, besides having no height, it can't get the width of your elements inside your body element. I would advise you to not build a layout solely with position: absolute elements, because it will be better for responsive layouts, and I assume that you are targeting mobile.
Anyway, below are the few fixes I can suggest to you.
html, body add width 100%
.grad remove width
.grad1 remove height
.grad#grad1 img add max-width to 100%, add display: block
#shade remove position: absolute, remove width
#grad1.grad #scrolling_text change to width 100%
#block_text remove width
#nested_skills change to font-size: 16px so that your grad3 div can take the width of your text
.grad#grad4_right add overflow-y: scroll. If you do not want to have the scrollbar then set height: auto but it will be a different height than the image on the left. Also it will not show the left margin on the left div as well as the right margin on the right div because you are using absolute.
.grad#grad5: you have to adjust the font size for this yourself
.grad#grad6 add left: 0; right: 0; margin: 0 auto
.grad#grad7 add display: block
This should be good.
(Did some search but couldn't find the exact same question/answer)
I am displaying the YouTube's hqdefault thumbnails on my page. However, I noticed they are 480 by 360, which means they have black top and bottom bars for all 16:9 ratio videos (which are the majority)
Example is: http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg
My question is:
I want the image to auto scale to fit its container's width, which will be a percentage of the total window's width (this means I don't know the exact pixel value in advance). And hide the black bars, and of course don't distort the image's ratio.
Can this be done using CSS only (hopefully with good browser support)? -- I am ok to assume all images should be 16:9 (for those that are of other ratio, I am ok to cut off some part of it, and only display part of it in 16:9).
Thanks
(PS: I have a JS solution, but I want to see if it doable in CSS. The JS solution is to use JS to get the container's width, then set the container's size according to 16:9 ratio. Then stretch the image and position it in the center, hide the extra areas of it -- which basically hides its top and bottom black bars)
I found this solution. Here's an example :
You set the div to width:100%, it will now stretch to the container size, in this case, the body. Then you set the padding-bottom: 56.25%; to get the 16:9 ratio.
Now set overflow: hidden; to hide what's coming out of the div and set top: -16.75%; to hide the upper black strip.
HTML
<div class="stretchy-wrapper">
<div>
<img src="http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg" style="overflow: hidden; width:100%;"/>
</div>
</div>
CSS
body {
width: 70%;
margin: 8px auto;
}
div.stretchy-wrapper{
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
background: blue;
overflow: hidden;
}
div.stretchy-wrapper > div {
position: absolute;
top: -16.75%; bottom: 0; left: 0; right: 0;
}
Maybe this - set the image as the background to a 16 x 9 div, then just set image width to 100% and position 50% 50%
div {
background:url('http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg');
background-size:100%;
background-position: 50% 50%;
height:180px;
width:320px;
}
<div></div>
I hope this jsfiddle will help you. Cheers!
working urljsfiddle
It will be fit even your web application/web site is responsive.
I'm trying to make extensible sidebars to the full document height without Javascript. I started to wrote some code to make this happen, but however, both div height are not extending after the viewport size.
Here is a small codepen of what is my problem http://codepen.io/anon/pen/bpAzo. As you can see, if you scroll down, height of both sidebars are just set to viewport size which is weird because i set both body, html, #sidebars to height: 100%;.
Is there a way to extend to full page height without using Javascript ?
Thank you.
You just set your sidebar height to 100% which gives it just a 100% of current browser size. Remove the height of your sidebar and remove also the html and body code.
#sidebar {
position: absolute;
top: 0;
width: 100px;
color: green;
color: #FFFFFF;
}
.left {
background-color: blue;
left: 0;
}
.right {
background-color: red;
right: 0;
}
DEMO HERE
http://codepen.io/anon/pen/jfEhH
If you set html and body to 100% height it will just be 100% of the window ( it's parent ) size. You need to set a specific height ( 3000px ) or 200% for example, which will be 2 times the windows height.
Body tag on codepen by default have margin. Without margin all looks good.
http://codepen.io/suez/pen/zJhne
But in the future, i will reccomend you to use overflow: hidden; on body (combined with margin: 0), this will provide 100% confidence that all of your content always will be inside viewport (without any scrolling).
Edited: if you want to use more than 100% of viewport height for your site, then you need to use position: fixed; on sidebar.
Just make the "height" attribute in your CSS style sheet to "auto", like as follows,
sidebar {
position: absolute;
top: 0;
height:auto;
width: 100px;
color: green;
}
Don't worry about "sidebar.right" ,as u will see no red color on right side of your page. It will automatically show up when you add up some content to it or just add few <br /> tags.