I'm using flexbox to responsively lay out a bunch of images.
.cards
.card.card1
.card.card2
.card.card3
.card.card4
etc....
footer
css:
.cards{
display: flex;
width: 100%;
flex-wrap: wrap;
height: 81.2rem;
}
.card{
display: flex;
flex-wrap: wrap;
height: 100%;
max-height: 28rem;
position: relative;
}
The problem I'm having is...
I have a footer that needs to be below the .cards div, but since .cards has a height, the footer is hovering over the div where I tell the height to be. (The cards themselves extend past the height.)
I have tried setting a taller height, however, then the space between the rows of cards expand (which I don't want). I've also tried not setting a height, but then the cards don't lay out at all, they just disappear or float way down the page.
Is there a way I can clear the .cards div?
Or just in general, get the footer to appear below the cards?
This shows the footer where it currently is, which is incorrect.
This shows the footer where I need it to be:
Instead of height: 100%, which limits the container to a fixed height, use min-height: 100% or remove height altogether.
If your height property is installed properly, you may need to apply the min-height to parent or ancestor elements.
More details: Working with the CSS height property and percentage values
Additional notes from OP:
Add the height to the direct children of the flex-box, this allows the container to determine its height.
On another note, if you put the height on the sub-children (not direct descendants), the container flex-box will not know how to set its own size and will have no height.
Related
I'm doing a project on Frontend Mentor and it wants a layout for mobile and desktop.
I can not for the life of me get this to center horizontally. I've also noticed that when I switch to mobile view my body is smaller than the container it contains which may be some of the problem. I'm new to CSS and HTML so it's probably just something I'm missing.
Code can be found here - https://github.com/grizzle83/product-preview-card-component-main.git
Used Flexbox for mobile and grid for desktop just to get practice on both.
Expected justify-content/items and align-items to center this but it is not.
I can fix the body being being smaller than the container by adding position: absolute to the body element in css but this seems like a band-aid and not best practice.
As you have not set a height to your container it has taken itself the minimum height required to fit all its child elements inside it. In order to expand the div across the screen provide it with a minimum height that matches the screen height.
So your .container code in your style.css must look like this.
.container {
display: flex;
flex-direction: column;
width: 375px;
justify-content: center;
align-items: center;
margin: auto;
min-height: 100vh;
}
As I can see in your code, your element is not having full height, you can give specific height or just try below..
.container {
min-height: 100vh;
}
Within my project I have a container <div> to which I add a border so it's visible to the user.
I add display: flex; to the container so it can take advantage of flex box. My current code works perfectly. This is because it is currently fully responsive, meaning when I resize the window from the right or left side, the container also moves which is perfect for responsiveness.
Here is my current code:
<div class="flex-container">
<h1>YO!</h1>
</div>
.flex-container {
display: flex;
flex-direction: row;
border: 1px solid #e3e3e3;
justify-content:center;
align-items: center;
margin-left: 40px;
}
However, when I add a width and height to the .flex-container, it doesn't act responsive when I resize the window - the container doesn't move with it.
So this happens when I add this to the container:
width: 350px;
height: 615px;
Does anybody know why this is happening? Is there a certain way to set a width and height of the container that has display: flex; set on it? Thank you.
It's because you're adding a fixed width and height. This is irregardless of wether the element is set to display flex.
You're telling the container that it has a static, fixed width of 350px. 350px is an absolute value, it isn't relative to the size of the screen.
If you're using flex, you can use flex-basis and set a percentage to set the width of the container, and even more advanced: use flex-grow or flex-shrink to responsively shrink or expand the container, depending on the container size.
So instead of
width: 350px;
Do like this
width: 100%;
max-width: 350px;
Here is a link https://jsfiddle.net/mironomadic/5cvgmpth/3/ for it working
Also if you need to stack the columns on top of each other change
flex-direction: row;
To
flex-direction: column;
Typically a regular width parameter isn't very responsive design.
Changing width: 350px to max-width: 350px will likely achieve the result you are looking for (although this size doesn't leave much room for growth, it will shrink in response to changing window size below 350px width).
So... I got this code: https://jsfiddle.net/jmg63s3e/1/
The code actually works fine if you resize the browser window until you have the text inline with the image and that's what I'm trying to achieve, but if you resize it down eventually the text drops below the image even if the wrapper width is a lot smaller than the window width.
My only purpose is to have:
the whole wrapper centered both vertically and horizontally in the browser window. Its total width and height unknown, depending on its children
row1 and row2 must not be inline: row2 must be below row1
All the elements inside row1 (the image and the text containing 2 spans) must be inline with each other
And well, the spinner inside row2 must also be centered inside the row but that was never a problem whatever solution I tried
As a matter of fact the only dynamic element in the whole code is the first span which in the example contains Player #1, since it should be the name of the player and it can be anything, any length.
Of course if I wanna make it responsive I will have to use media queries or dynamically change widths and heights and font-sizes with JS, and I'm willing to do so. My problem here is only the wrapper itself and the text that drops below the image even if the wrapper width is a lot smaller than the window width, so I'm asking for a solution that works as long as the wrapper width is smaller than the window width. When the wrapper width drops below the window width, I will handle the style with responsive media queries or JS. I would just like to have the wrapper to be centered both vertically and horizontally in the window, and its size to be dynamic and depending on children.
I've already tried any solution I could think of, but with an unknown wrapper width I just can't figure it out. Can someone help me please? I'm open to any suggestion and any solution, as long as it's pure CSS and it doesn't involve JS. Thanks everyone in advance
You can use flexbox to fix these problems.
Here's an updated fiddle with old CSS commented out: https://jsfiddle.net/jmg63s3e/3/
First, to align the wrapper both horizontally and vertically you need to make the parent container a flex container with display: flex and use justify-content: center and align-items: center. You also need to set a height or else it will wrap to the height of the child and not give you the centering effect. I used the following. The height can be whatever you need it to be.
.trump-waiting {
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
overflow: hidden;
height: 100vh;
}
Next, I used display: flex on the wrapper and flex-direction: column to make sure they are all lined up like we want them to be.
.trump-waiting .wrapper {
display:flex;
flex-direction:column;
To fix row1, again I used flexbox and removed the inline-block and the set height. You could set the height as long as you take care of resizing the font in the text divs, with media queries for instance. Otherwise, with an explicit height, the font at the size it's at now will break out of their containers. Without explicitly setting the height, the containers will adjust in size.
.trump-waiting .row1 {
display: flex;
flex-direction: row;
/* display: inline-block; */
/* height: 60px; */
background-color: yellow;
}
I also added flex-shrink:0 to .image to keep it from shrinking on resize.
To keep Player #1 and 'is choosing the trump suit' inline, I also added display: flex and flex-direction: row to .row keep them on the same line.
Finally, to align the loader, I did the vertical/horizontal alignment trick used above, plus added some padding to the div to give it some space and removed the old css.
.trump-waiting .row2 {
display: flex;
justify-content: center;
align-items: center;
padding: 16px 0 16px 0;
/* display: block; */
/* margin-top: 50px; */
The last step would be to use media queries to adjust the font-sizes on .text spans so the font doesn't expand their container on resize.
Many ways to skin a cat and I'm sure others will have different perhaps better solutions, but hope this helps. There's a great summary of flexbox here if you need it. I may have left out a change in this summary, but it should all be in the fiddle.
EDIT: Realized I made a mistake summarizing the css in the jsfiddle and also removed a redundant css property. Now updated.
I have this pen here: https://codepen.io/anon/pen/wPdrod
As you can see (at least in Chrome and Firefox), there are 2 vertical scroll bars. There should only be the inner one, as the header should remain static.
The CSS causing this is:
#app
{
display: flex;
flex-direction: column;
box-sizing: border-box;
height: 100vh;
}
Particularly the 100vh height. This is causing the viewport to be too tall by 36px. Which is the header height. If I do:
#app
{
...
height: calc(100vh - 36px);
}
Then it works perfectly fine. I'm trying to figure out why I need to do this in the first place. What about this layout is causing the 100vh to account for the header height? I feel like I shouldn't have to do that calc as the header is within the layout div along with the rest of the elements.
#header is inside #app so it's normal behavior, specially if your neighbor (#body) has height: 100% (height is set relative to parent so it's also 100vh). That's the reason to show second scroll.
What actually you can do is removing height from #body.
I'm currently trying to get an element (div) stretching itself over the free space of a parent element while respecting the size of other elements on its level. I found some solutions and tried most of them but I couldn't get it to work. I suspect this is because of the cms I'm working with which - when telling it to make a set of columns the same height - changes the parent display-style to table-cell. So... here is an image of what I'm trying to archive.
As said, the CMS changes the blue container to display: table-cell to stretch it over the whole area and make all columns in a row the same height. Inside of this blue container are the elements I can control. These are up to four div (white/green) inside of a parent div (yellow). The white div are dynamic and not always present and the green one needs to stretch over the whole vertical space no matter which of the white elements are present.
And idea how to accomplish that? I tried a lot of answers about this topic but they didnt work.. I think that's maybe due to the fact that the blue container is a table-cell?
edit: Here is what I got so far.
<div id="box_wrap">
<div class="box_title">
Title
</div>
<div class="box_image">
Image
</div>
<div class="box_content">
Content
</div>
<div class="box_more">
Read More
</div>
</div>
All of this is in a container provided by the CMS itself which has the attibute display: table-cell.
#box_wrap {
display: flex;
flex-direction: column;
}
.box_content {
display: flex;
flex: 2;
}
I think the problem might be that the container provided my the CMS has no defined height. If I give my #box_wrap a fixed height manually then the div in it will work as they should. I also tried height: auto and height: 100% for the #box_wrap and it doesn't work. Again, probably because the parent has no defined height, no? That is the last thing that I need to solve. The #box_wrap needs to stretch over the vertical, currently it only extends as far as it needs to cover the content.
I also noticed that the first image I provided wasn't 100% accurate so I updated it.
I would use this to allow the .box_content to grow (i.e. become higher) and the others not:
.box_title,
.box_image,
.box_image {
flex-grow: 0;
}
.box_content {
flex-grow: 1;
}
In addition, you should apply height: 100% to #box_wrap, but for that you also need height: 100% on body and html to have a reference for the height of #box_wrap. So, to sum up:
html, body {
height: 100%;
margin: 0;
}
#box_wrap {
height: 100%;
}
You also might want to add...
body {
padding: 10px;
box-sizing: border-box;
}
...to get that distance between the edge of the screen and your container as it's shown in your image.