I want my container to shrink when page is smaller. How can i do that?
.home-container {
display: flex;
flex-direction: column;
background-color: #ffefd0;
border-radius: 15px;
box-shadow: 3px 3px 3px 1px grey;
margin: 30px auto 0 auto;
width: 800px;
}
Don't use a set width. It's best to avoid setting height and width (when possible) to avoid problems with responsiveness. Instead of width, use max-width: 800px.
Do not provide width property as you have passed it ... instead add padding to that container accordingly and set width property to max-width like this
.home-container {
display: flex;
flex-direction: column;
background-color: #ffefd0;
border-radius: 15px;
box-shadow: 3px 3px 3px 1px grey;
margin: 30px auto 0 auto;
padding:20px;
width: max-width;
}
maybe like this ??
.home-container {
display: flex;
flex-direction: column;
background-color: #ffefd0;
border-radius: 15px;
box-shadow: 3px 3px 3px 1px grey;
margin: 30px auto 0 auto;
max-width: 800px;
grid-gap:10px;
height:auto;
}
.box {
height:80px;
width:80px;
margin:20px;
background-color:blue;
border:1px solid gray;
}
<div class="home-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
Related
I've searched and tried a lot of solutions but none of them is working for my case.
I have this set up where neither body nor main should change. Inside them I can add as many divs as I want and change any style.
<div class="body">
<div class="main">
<div class="should-be-full-height">
Content
</div>
</div>
</div>
.body {
display: flex;
flex-direction: column;
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: block;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
}
https://jsfiddle.net/eqwu3yfh/
I added background colors and borders just to see better what's going on.
I need the div with the .should-be-full-height class to use 100% of the height of its parent (.main). How can I achieve that?
Thanks. Sorry if this has been asked, I couldn't find an answer.
You either remove flex-direction: column from body and you can use height:100%
.body {
display: flex;
/* flex-direction: column;*/
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: block;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
height: 100%;
}
<div class="body">
<div class="main">
<div class="should-be-full-height">
Hi
</div>
</div>
</div>
Or you change the display of main to be flex and use width: 100%
.body {
display: flex;
flex-direction: column;
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: flex;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
width: 100%;
}
<div class="body">
<div class="main">
<div class="should-be-full-height">
Hi
</div>
</div>
</div>
I know you said you cannot change body and main but I don't see any other solution.
Trying to have all flex boxes inside my flex containers scale equally.
If you try and reduce the viewport, the center flexbox will start to resize, but the outer ones do not. So you end up with a situation where you have a tiny image in the center with massive images on the sides.
I've only just started learning CSS, so I'm not entirely sure what I am doing so I appreciate any help.
Here are a few extra images that help illustrate the issue:
Before reducing viewport:
After:
So ideally I want the images on the outside to scale down alongside the image in the center.
.flexbox-container {
display: flex;
justify-content: center;
background-color: #808080;
}
.flexbox-inner {
width: 1280px;
height: 720px;
margin: 0px 32px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer {
width: 192px;
height: 1148px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer-inner {
width: 160px;
height: 558px;
margin: auto;
border: 3px solid #ffffff;
}
.flexbox-outer-inner-bottom {
margin-top: 26px;
}
<div class="flexbox-container">
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
<div class="flexbox-inner"></div>
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
</div>
Here is an example of how you could use relative length units, in this case percentages:
* {
box-sizing: border-box;
}
.flexbox-container {
display: flex;
justify-content: center;
background-color: #808080;
}
.flexbox-inner {
width: 60%;
height: 720px;
margin: 0px 32px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer {
width: 20%;
height: 1148px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer-inner {
width: 90%;
height: 558px;
margin: auto;
border: 3px solid #ffffff;
}
.flexbox-outer-inner-bottom {
margin-top: 26px;
}
<div class="flexbox-container">
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
<div class="flexbox-inner"></div>
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
</div>
I am trying to make a fluid flex field where if there is no enough space then it should drop to next line. As you can see in this example if you decrease the size of the field it doesnt drop to next line because I am using flex.
.container {
width: 80%;
border: 2px solid #ddd;
padding: 20px;
display: flex;
overflow: hidden;
}
.container .panel {
flex: none;
}
.container .panel-info {
display: flex;
align-items: center;
}
.container .panel-info .dot {
background-color: #ccc;
width: 4px;
height: 4px;
border-radius: 50%;
margin: 0 8px;
}
<div class="container">
<div class="panel">Some Long Info</div>
<div class="panel-info">
<div class="dot"></div>
<div class="info">Information</div>
</div>
</div>
Use flex-wrap: wrap.
More information on MDN about the flex-wrap property
I'm really new to flexbox and I'm trying to understand why my flexbox won't wrap when the browser window width gets smaller. The row never turns into a column. why is that? I appreciate any help?
stackblitz
.listingBody {
min-height: 100vh;
}
.listingCard {
width: 800px;
height: 400px;
border-width: 2px;
border-style: solid;
display: flex;
flex-flow: row wrap;
border-radius: 25px;
background: white;
margin: 0 auto;
justify-content: center;
align-items: center;
box-shadow: 10px 10px 5px -2px #888;
}
.image {
width: 200px;
height: 200px;
background-color: red;
}
.rules {
width: 200px;
height: 200px;
background-color: green;
}
.info {
width: 200px;
height: 200px;
background-color: blue;
}
<div class="listingBody">
<div class="listingCard">
<div class="image">
test
</div>
<div class="info">
test
</div>
<div class="rules">
test
</div>
</div>
</div>
It won't wrap because you set a fixed width to the parent div. You can either just use max-width or remove it altogether.
.listingBody {
min-height: 100vh;
}
.listingCard {
height: 400px;
border-width: 2px;
border-style: solid;
display: flex;
flex-flow: row wrap;
border-radius: 25px;
background: white;
margin: 0 auto;
justify-content: center;
align-items: center;
box-shadow: 10px 10px 5px -2px #888;
}
.image {
width: 200px;
height: 200px;
background-color: red;
}
.rules {
width: 200px;
height: 200px;
background-color: green;
}
.info {
width: 200px;
height: 200px;
background-color: blue;
}
<div class="listingBody">
<div class="listingCard">
<div class="image">
test
</div>
<div class="info">
test
</div>
<div class="rules">
test
</div>
</div>
</div>
This happens because you are setting a fixed with to the container div without a max width. You can just change the .listingCard style to this:
.listingCard {
width: 800px;
max-width: 100%; /* <-- add this */
height: 400px;
border-width: 2px;
border-style: solid;
display: flex;
flex-flow: row wrap;
border-radius: 25px;
background: white;
margin: 0 auto;
justify-content: center;
align-items: center;
box-shadow: 10px 10px 5px -2px #888;
}
Or just replace width: 800px and max-width: 100% with max-width: 800px which will provide the same effect.
By doing it like this it the content will have a max width of 800px in case the window is larger than 800px or adjust to the window size in case it is resized to a lower width.
The flex items are not wrapping because you have a width set on the flexbox container, so narrowing the browser window smaller than that won't change the size of the flexbox container and therefore the flex items will have no reason to wrap.
Try replacing width: 800px; on .listingCard with max-width: 800px;
I'm trying out a css challenge where the requirements state that:
Draw 2 squares of width 50px side by side
Each square should have a circle in the center with width of 10px
The distance between two squares should be 10px
I can't seem to make my circle appear.. Here's my fiddle - https://jsfiddle.net/xmozvs5p/
Here's a snippet of my css:
.square {
width:50px;
height:50px;
border:1px solid black;
display:inline-block;
margin:10px;
}
.circle{
background-color:green;
border-radius: 50%;
width:10px;
display:block;
margin:auto;
}
Add a height to the .circle element and it can be centered using flexbox on the parent.
.square {
width: 50px;
height: 50px;
border: 1px solid black;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 10px 5px; /* 10px between elements */
}
.circle {
background-color: green;
border-radius: 50%;
width: 10px;
height: 10px;
display: block;
margin: auto;
}
<div class="square">
<div class="circle"></div>
</div>
<div class="square">
<div class="circle"></div>
</div>
You can also try this way with less of code:
.square {
width: 50px;
height: 50px;
border: 1px solid black;
display: inline-block;
background:radial-gradient(circle at center,green 5px,transparent 6px);
margin: 10px 5px;
}
<div class="square">
</div>
<div class="square">
</div>