I'm trying to push the footer, inside a flex, to page end. I'm using margin-top: auto to accomplish the same, but it doesn't work. I also tried align-self and align-items, they don't work as well. I also looked at all the SOs. What am I missing?
Codepen for my problem: https://codepen.io/vivekest/pen/XWmvyKq
Thanks in advance!
You need to set height on #all-content
#all-content{
...
height: 100vh;
}
another approach is to set justify-content property on #all-content and remove margin-top from #page-footer
#all-content{
...
justify-content: space-between;
height: 100vh;
}
#page-footer{
width: 100%;
}
the problem is that there is nothing between the footer and the all-content and hence the page-footer was not going down, so the usual way is to make a div block and set it's height to 100vh and it will be useful when you want to add more content between these two or
you can set margin-top:100vh that will bring the page-footer block down.
and yes stating the height is also a great method.
Related
Consider the following:
Consider this to be a full, 1920px screen. The div wrapping the texts and buttons seen in A is a flexbox.
When I resize the screen, the text and buttons squeeze as much as possible - as seen in B.
Eventually, when there's no more space to squeeze, it collapses into C.
Now, I've added a breakpoint so that C comes to effect at 1024px, meaning that the texts and buttons will have some padding between them so to never get glued together. For this, I added a padding: 0 50px;.
I was wondering if this - adding the padding - is the best, most efficient way of implementing this collapse given that I'm working with flexboxes.
Should this be done in a different, more appropriate way?
class {
display: flex;
flex-direction: row;
word-wrap: normal;
text-align: center;
justify-content: space-between;
height: 100%;
}
#include breakpoint-max(1068px) {
padding: 0 50px;
}
}
Thank you!
Try to add flex-wrap:wrap;. By default it is no-wrap. That's why elements squeezing. You can read more here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have been wrestling with this issue for a while and couldn't find a similar question:
I am trying to change the width of a <div> without affecting its content, meaning I don't want the content to move or readjust in anyway. At the same time, I need the content to be centered in the page depending on the screen resolution.
Everything works fine when I don't use margin:0 auto; in my CSS, but that is not the result I want since the content is not centered anymore.
I am still learning CSS and if anyone could take a look at the Code Pen I created I'd appreciate it.
Thanks
========EDIT=========
Please look at the codepen, this is what I am trying to achieve:
When the width of the <div> is changed, the text should not change position or be readjusted in anyway.
This can be achieved by deleting margin:0 auto; from the CSS section: The text does not change position and it's cut short when the <div> width is changed.
But I need margin:0 auto; to stay to make sure that the <div> content adapts to screen resolution.
Hope this clarifies intent.
Code Pen Here
Hope this is what you are looking for, you can fix this by CSS flex property instead of position "absolute"
Try this fiddle
.wrapper-cme {
width:100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
I have a problem with this one in Firefox:
https://codepen.io/anon/pen/dJpwEj
For some reason it shrinks in Firefox, like it can't calculate the height.
Both Chrome and Edge shows it correctly but for Firefox to show the same result I need to set height to 90vh like its parent.
css as follows: changing height: 100% to 90vh works. But I dont understand why.
.themes-outercontainer
{
position: relative;
display: table;
width: 100%;
height: 90vh;
}
.themes-container
{
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
Your .themes-container is overriding by a display: flex, so your display: table-cell is not applied. You can't manage height property on this way when you use flexbox attributes.
The other problem is that .themes-whiteoverlay is position: absolute so the height doesn't work as you expected.
Please, try to think what's your preference: flexbox or table, and try to remove absolute positioning if you don't know how it works.
Unlike other browsers, Firefox doesn't assume the actual height of the screen, so it has to use viewpoint height units to figure that out. The only exception to this I believe is the body element
For instance, let's say that you're given a question in Math. The teacher wants you to find what 50% of an unknown number is. How would you do that? You can't, so you have to ask for the number.
I am new to bootstrap and web stuff in general. I am having trouble with an application I am developing. What I would like is to have a top bar with buttons that do things and below that a setup where 20% left is filled with a div and the other 80% is filled with a map.
I can get the split using col-md-2 and col-md-10 just fine but the map does not extend to 100% height (I would say it sits about 75%. I have tried many different things offered up here and other places to solve the 100% height but nothing seems to work.
I have put together this in way of an example of what I am currently trying. I stripped away most of the css as none of it was working for me.
http://www.bootply.com/0xx9zBH3Ke
if you can offer assistance I would appreciate it.
**edit
I realized my bootply didnt illustrate my problem very well so I tossed the file at the link below to better show whats going on.
http://ec2-54-186-204-72.us-west-2.compute.amazonaws.com/demo2/bootysample.html
I have tried a couple of solutions but it still fights me by miss aligning things (mostly by placing the leftpane as its own row)
Try adding a 100% height to the html or body elemement. Then wrap your 20-80% width divs in a wrapper div and also set that to 100% height.
here is your solution
Bootply
#row {
display: table;
}
#leftpane, #map {
float: none;
display: table-cell;
vertical-align: top;
}
Maybe you can use like this
.center-element{
min-height: 100%;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
Only problem is IE :(
I have designed a layout and i find some gaps in the stacking of divs over each other.
can some one help me http://uniquedl.com/3closets/about.html
and
You need this in style.css:
img { display: block }
and you need to change the height on .introduction .intro-message to 384px, to match the height of the image on the left.
Doing this solves both problems.
As an alternative to img { display: block }, you could instead do: img { vertical-align:bottom }. This also fixes.
See this answer for a good explanation of what's going on here.
#Alohci explains it very nicely.
You have a <div class="clear"></div> in both instances there. I would say that the page is behaving as expected.
Edit: If you use Google Chrome to view this page, you can right click on an area and choose "inspect element". It will provide a window that will display the code as it's rendered by the browser, and on the right there will be another properties window that displays the css being assigned to the elements you're looking at.
in their div .introduction you have an image larger than the div itself, this must be the problem, including the other divs
First gap: your class .introduction is having height of 384px where else class .intro-message (which is a child of .introduction) is having a height of 390px.
Hi for your website :http://uniquedl.com/3closets/about.html just make the style like
.introduction {
height: 384px;
overflow: hidden;
position: relative;
}
Then it will work