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).
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;
}
I have 3 group of checkboxes, first two are given fixed width and the last one should take the remaining space. In the last group if the names are long, horizontal scroll appear for this group.
However, the last group is overflowing the parent div here. how can I fix this?
You just need to add overflow: auto to the parent container .select__content, this way when content is too big to fit in its block formatting context and overflows, the scrollbar appears and the container .select__content container becomes scrollable. Try this out.
.select__content {
margin-top: 2px;
display: flex;
overflow: auto;
}
Here is the updated CodeSandbox demo.
.select_checkbox takes width auto which grows because the span element is very long. It can be resolved by giving .select_checkbox a max-width so it does not go beyond the specified width and the scrollbar may appear. Try adding max-width like this.
.select__checkbox {
border: 2px solid lightgray;
display: flex;
flex-direction: column;
max-width: 260px;
}
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 a tricky question which i couldn't find any solution online. (All solutions didn't do what i need.)
I have a div with the following css:
.logo {
float: right;
display: inline-flex;
flex-direction: column;
justify-content: center;
height: 100%;//translates into 460px
width: 32%;//translates into 240px
}
Inside there is a single element with an unknown ratio which changes from image to image. (One image can be 400x200, the other one can be 100x100, the 3rd one can be 300x100 etc... i don't really know the height and width of the image in advanced)
The goal:
I want to show the image while using the maximum size possible of the parent div, without changing the image's aspect ration.
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.