I have a div tag which holds an image inside. The image dimension can go beyond the screen size. In such a case I wish to extend the div tags height and have footer after that. Currently i have styled the div tag as:
#dropbox {
height: 80%;
text-align: center;
display: flex;
flex-direction: column;
min-height: 60vh;
}
#footer{
display: flex;
position: relative}
The problem is that the footer stays where it is. It does not go down all the way to the bottom once the image is displayed in the div tag.
You have a fixed height on your div. If you remove it, the div should be pushing the footer down.
#dropbox {
text-align: center;
display: flex;
flex-direction: column;
min-height: 80%;
}
Related
I want to set the height of a child tag to 100% but as soon as I redirect to another page the height remains same disabling the page to scroll.
Image 1.css
body{
background: url("Resources/Cash.jpeg");
}
html,body{
margin: 0;
padding: 0;
}
#root{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.account{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 30px;
backdrop-filter: blur(2px);
}
This style without setting the height makes the first page look half but the second page which is 'Create' looks perfect and scrollable.
Image 1
Image 2.css
body{
background: url("Resources/Cash.jpeg");
}
html,body{
margin: 0;
padding: 0;
height: 100%;
}
#root{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.account{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 30px;
height: 100%;
backdrop-filter: blur(2px);
}
But after adding height to html,body,account and root, the home page looks perfect but the 'Create' page has 'Height' of 100% so it fits the page and becomes unable to scroll.
Image 2
React Html Outer body
<div id="root">
<div class="account">
<!-- Content -->
</div>
</div>
Is there a way so the final output Home looks like image 2 and the Create page looks like image 1
Not sure how you are setting the height exactly, but if you are using the same container for both pages, then I can think of two solutions out of the box:
Give the height CSS property to the component that is displaying the content, not the parent container that is wrapping it.
Use className, and change them dynamically. This can be done with the help of React.useState hook. Set the className to be one thing when it is on the first page and change it when you move to the second page. And Match those classNames in your CSS files.
I am making a sort of section with one side being a h1 and anchor and one side being an image. However, I am having troubles moving the anchor tag as its not working at all with margin since it adds margin to the entire div. This does not apply to the h1.
Output I want is that I'd like the anchor tag to be moveable with margin etc. without moving the entire div and stuff like that.
.make-account {
height: 100%;
width: 100%;
margin-top: 0.5%;
background-color: #EBCEBF;
display: inline-flex;
flex-flow: row;
justify-content: space-between;
}
.make-account h1 {
margin-top: 5%;
text-align: center;
color: #FDF8F5;
}
.make-account img {
width: 50%;
display: inline-flex;
}
.make-account a {
color: #FDF8F5;
background-color: #266150;
padding: 1% 2% 1% 2%;
text-align: center;
}
<div class="make-account">
<h1>WE HELP YOU FIND YOUR OWN SPORTBUDDY!</h1>
MAKE AN ACCOUNT
<img src="https://via.placeholder.com/100">
</div>
Edit: How I recognized the problem now is that since it's a flex-flow: row
It recognizes the tag and tag as items, same with , my output that I want is one div with the background-color taking up 50% and that div having an and positioned within them using margin and not being their own items, and another item being the img taking up the other 50%.
add the following to your style
aside {
display: flex;
justify-content: center center;
flex-direction: column;
}
and make sure to wrap the H1 and A in an aside or whatever you like, make sure to edit the style accordingly.
<div class="make-account">
<aside>
<h1>WE HELP YOU FIND YOUR OWN SPORTBUDDY!</h1>
MAKE AN ACCOUNT
</aside>
<img src="https://via.placeholder.com/100">
</div>
I hope this answer helps you out in your further endeavours!
I need help to structure a page, i thought it was easy but it wasn't, at least not for me.
Logo: always centered, of course.
Element: For instance, an image, always centered. Image can be vertical or horizontal, but needs to be centered.
Text: Next to the element/image.
There are no boxes really, i saw other questions where they where trying to keep center box always centered, but in this case i just have one main box/container and then text/caption next to the image.
What i cannot do is keeping image centered, because if i add text next to the image, will try to center the whole thing.
Thanks!
Horizontal and vertical centering is most easily solved with flexbox. Simply set the following on your container:
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
Note that you'll want a height too! I've gone with 100vh to occupy the full viewport.
To centralise your element at the top just give it align-self: flex-start.
From here it's just a matter of having a child which contains both the central item and offset item, both of which need position: absolute. The offset item will additionally want margin-left equal to the width of the centralised item, but it should only be applied inside of a media query.
To drop the offset item below for mobile screens, you'll want a second media query which adds margin-top.
This can be seen in the following (click Full page after Run code snippet to see the desktop view).
body {
margin: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
height: 100vh;
}
.top {
border: 1px solid black;
width: 50%;
height: 10%;
align-self: flex-start;
}
.inner-container {
border: 1px solid black;
width: 50%;
height: 50%
}
.center, .off-center {
position: absolute;
}
#media screen and (min-width: 769px) {
.off-center {
margin-left: 50%;
}
}
#media screen and (max-width: 768px) {
.off-center {
margin-top: 50vh;
}
}
<div class="container">
<div class="top">Logo</div>
<div class="inner-container">
<div class="center">Center</div>
<div class="off-center">Off-center</div>
</div>
</div>
I'm getting some unexpected behavior with my margins using flex and I would like some help in understanding why.
I'v got some simple html like so:
<div className="dashboard">
<div className="dashboard__inner-container">Inner Container</div>
</div>
And my scss file looks like this:
.dashboard {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex: 1 1 auto;
background-color: #f4f6f8;
}
.dashboard__inner-container {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex: 1 1 auto;
width: 100%;
margin: 100px 50px;
}
What I am expecting is that the inner container will completely fill up the parent container, minus 100px on the top and bottom and 50px on the right and left. The vertical margin works as expected, but the horizontal margin actually extends out of the parent div, so that the inner container still appears to be taking up the entire width of the parent div.
I'm not sure if this is related to flexbox or not.
Here is an isolated CodePen https://codepen.io/MaxMillington2/pen/EQWZoj
When using align-items: center with column direction, the item will collapse to its content width, instead of with its default, stretch, which makes it fill its parent's width.
Additionally, when setting width: 100% to the inner, it will override the default stretch, which will make the item be 100% of parent's width + margin.
For the expected output, remove align-items: center on the outer and width: 100% on inner.
Stack snippet
html {
height: 100%;
overflow: auto;
}
.outer {
display: flex;
justify-content: center;
flex-direction: column;
background-color: #f4f6f8;
height: 100%;
}
.inner {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex: 1 1 auto;
text-align: center;
margin: 100px 80px;
}
<div class='outer'>
outer
<div class='inner'>
inner
</div>
</div>
I'm trying to center a div on a webpage using flexbox. I'm setting the following CSS properties. I see that it's being centered horizontally, but not vertically.
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
Here's the fiddle: JSFIDDLE
Can you explain what I'm doing wrong?
A <div> element without an explicit height defaults to the height of it's contents, as all block elements do. You'd probably want to set it to 100% of it's parent, the <body>, but that's not enough, since that is also a block element. So again, you need to set that to 100% height, to match it's parent, the <html>. And yet again, 100% is still required.
But once all that is done, you get that annoying vertical scroll bar. That's a result of the default margin the body has, and the way the box model is defined. You have several ways you can combat that, but the easiest is to set your margins to 0.
See corrected fiddle.
html, body {
height: 100%;
margin: 0px;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.item {
background-color: blue;
height: 50px;
width: 50px;
}
<div class="flex-container">
<div class="item">
</div>
</div>
You just need to set html, body, and your flex container to height: 100%. The reason it wasn't working is that your flex container didn't have an explicit height set, so it defaulted to the height of its contents.
Live Demo:
html, body {
height: 100%;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.item {
background-color: blue;
height: 50px;
width: 50px;
}
<div class="flex-container">
<div class="item">
</div>
</div>
JSFiddle Version: http://jsfiddle.net/d4vkq3s7/3/