I am trying to create a flexbox that distributes space equally amongst its 2 children. The issue I encountered is that after I minimize the screen, the content of the first child is becoming hidden.
See: https://jsfiddle.net/jo6dj8ne/
Gif showing the problem
I'd like the content of the info-section div to always be visible, but the map-section div to shrink and the scrollbar to appear.
<div class="contact-container">
<div class="info-section">
... some content (info-section is also a flexbox)
</div>
<div class="map-section"></div>
</div>
The issue was setting flex to 1, which was equivalent to setting it to 1 1 0. At the time I was not familiar with flex-grow, flex-shrink and flex-basis CSS properties, that's why I was having trouble making it work.
After setting flex of info-section to 1 0 auto it no longer shrinks and its initial size is equal to the size of its content.
Working example here.
Just give overflow: auto; to .info-section
try this code:
html, body {
height: 100%;
}
.contact-container {
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
}
.contact-container .info-section {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
overflow: auto;
}
.contact-container .info-section .social {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1em;
margin-top: var(--padding-large);
}
.contact-container .map-section {
background-color: blue;
height: 200px;
flex: 1;
}
<div class="contact-container">
<div class="info-section">
<div class="heading">Heading</div>
<div class="content">
<p>Lorizzle ipsum dolizzle stuff amizzle, shizznit adipiscing elit. Nullizzle sapien velizzle, mofo volutpizzle, suscipit quis, gravida bizzle.</p>
</div>
<div class="social">
<img src="https://image.flaticon.com/teams/slug/smashicons.jpg" width="40px">
<img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" width="40px">
<img src="http://freedesignfile.com/upload/2017/04/Summer-holiday-vector-icon.jpg" width="40px">
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" width="40px">
</div>
</div>
<div class="map-section">
</div>
</div>
Simply add min-height: 300px; to .info-section. This will force the container to always have at least 300px of height. If it's bigger than that, it will scroll.
Complete CSS code:
html, body {
height: 100%;
}
.contact-container {
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
.info-section {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
min-height: 300px;
.social {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1em;
margin-top: var(--padding-large);
}
}
.map-section {
background-color: blue;
min-height: 200px;
flex: 1;
}
}
Related
When I try to set textarea as follows. I could set max-width: 50rem as follows.
.row {
display: flex;
flex-wrap: nowrap;
gap: 1rem;
}
.box {
width: 100%;
max-width: 50rem
}
<div class="row">
<div class="label">test</div>
<textarea class="box">test</textarea>
</div>
But when I add class="template", the textarea is shortened as follows. My desired result is to set textarea max-width:50rem as above.
But when I set the following class, the width is shortened.
.row {
display: flex;
flex-wrap: nowrap;
gap: 1rem;
}
.box {
width: 100%;
max-width: 50rem
}
.template {
display: grid;
grid-template-columns: 3rem 1fr;
gap: 0.75rem;
align-items: center;
height: 100%;
}
<div class="row">
<div class="template">
<div class="label">test</div>
<textarea class="box">test</textarea>
</div>
</div>
How can I set max-width:50rem inside <div class="template"> ?
Thanks.
The max-width isn't working because the row element makes it to small to take any max-height into effect.
I'd use a flex-grow: 1; on the .template to let it grow so the max-width will trigger
.row {
display: flex;
width:100%;
flex-wrap: nowrap;
gap: 1rem;
}
.box {
width: 100%;
max-width: 50rem
}
.template {
display: grid;
grid-template-columns: 3rem 1fr;
gap: 0.75rem;
align-items: center;
height: 100%;
flex-grow: 1;
}
<div class="row">
<div class="template">
<div class="label">test</div>
<textarea class="box">test</textarea>
</div>
</div>
I've tried using text-align and justify-content but both of them refuse to work. I think I've made a mistake with all the spacings.
Here's the HTML:
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
}
.contents1 {
display: flex;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1>This website is awesome</h1>
<p>This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
Put the justify-contents and align-items into class image
.container1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.image{
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
}
It is a good practice to first add some background-color to better see where each element is and then remove these dumb colors.
For the container which has a display:flex, please add
width:100%;
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 75%;
margin: auto;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 75%
height: 200px;
margin: auto;
}
.contents1 {
display: flex;
flex-direction: column;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1 class="center">This website is awesome</h1>
<p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
Assuming you want to center the container1 div with the image placeholder div, the issue is that your divs don't have an assigned with. Set their width to a percentage less than the parent and then use the CSS property margin: auto. You will also need to apply flex-direction: column to your parent div, contents1
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 400px;
margin: auto;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
margin: auto;
}
.contents1 {
display: flex;
flex-direction: column;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1 class="center">This website is awesome</h1>
<p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
I am building a grid layout based on 3 rows and I would like the middle row to take as much space as possible.
The first row should be at the start of the screen (blue bar in the code example) and the third row should be at the end of the screen(red bar in the code example)
How can I achieve this? :S
https://jsfiddle.net/xmghkLvs/31/
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
row-gap: 1%;
}
.top-bar{
background-color: blue;
border-radius: 5px;
}
.main-menu{
justify-self: center;
display: flex;
flex-direction: column;
background-color: green;
}
.bottom-bar{
background-color: red;
border-radius: 5px;
}
<div class="grid">
<div class="top-bar">
<h1>
Title
</h1>
</div>
<div class="main-menu">
<button>
One Button
</button>
<button>
Other Button
</button>
</div>
<div class="bottom-bar">
<p>
I'm a text
</p>
</div>
</div>
1st: Give the grid a min-height like 100vh (.grid { min-height: 100vh; }). This will make consume at least the viewports height.
2nd: Give the the first and last row a height of min-content. That will make it only consume as much height as needed. auto will then consume all remaining space by default.
.grid {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content auto min-content;
row-gap: 1%;
}
.top-bar{
background-color: blue;
border-radius: 5px;
}
.main-menu{
justify-self: center;
display: flex;
flex-direction: column;
background-color: green;
}
.bottom-bar{
background-color: red;
border-radius: 5px;
}
<div class="grid">
<div class="top-bar">
<h1>
Title
</h1>
</div>
<div class="main-menu">
<button>
One Button
</button>
<button>
Other Button
</button>
</div>
<div class="bottom-bar">
<p>
I'm a text
</p>
</div>
</div>
Try using 100vh
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
row-gap: 1%;
height: 100vh;
}
and add specific height for the .top-bar abd .bottom-bar
You could approach this using Flexbox and 100vh as show below.
.grid {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.top-bar{
display: flex;
height: 20%;
}
.main-menu{
display: flex;
align-items: center;
justify-content: center;
height: 60%;
}
.main-menu button {
height: 60px;
width: 120px;
}
.bottom-bar{
display: flex;
align-items: center;
justify-content: center;
height: 20%;
}
How to reduce the width of the flexbox container with the wrap option so it takes only the width taken by its items ?
The objective is not to see any green at the right of the yellow boxes (except for the margin set on the box item)
NOTE: The flexbox with wrap can accept more than 2 items per row, in function of the window's size.
main {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 900px; /* This width changes with the window's size */
background-color: red;
}
.list {
display: flex;
flex-wrap: wrap;
background-color: green;
justify-content: flex-start;
}
.list .box {
width: 300px; /* This will never change */
height: 300px;
margin: 0 32px 32px 0;
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</main>
Link to Codepen
I want to show you an alternative with css-grid and using the attribute minmax. I believe that will be closer to that what you want.
It will give every box a width of at least 300px and will fit as many boxes as possible. If space is left, then box size will improve to fit the space unless another box would fit.
To do that we have to add: grid-template-columns: repeat(auto-fit, minmax(300px, 1fr) );
That css line will add the columns amount. repeat means, that the the adding of a column is repeated according to the following rules:
auto-fit: It has to fit the screen width without leaving an empty space. it will resize the 1fr to make it possible.
minmax(300px, 1fr) means that every fraction needs to be at least 300px. If the screen is larger, then the first rule will apply again and the 1fr will be resized accordingly.
body {
margin: 0;
padding: 0;
width: 900px;
}
h1 {
background-color: red;
height: auto;
margin: 0;
}
.list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr) );
grid-auto-rows: auto;
grid-gap: 32px;
background-color: green;
}
.box {
min-height: 300px;
background-color: yellow;
}
<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</main>
The answers given are correct,
You can try this as a different alternative.
* {
box-sizing: border-box;
}
main {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 900px;
/* emulate high width */
background-color: red;
}
.list {
background-color: green;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.list .box-wrapper {
width: 300px;
height: 300px;
display: flex;
}
.list .box {
width: 100%;
margin: 0 16px 16px 0;
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
</div>
</main>
I just commented out the margin on the .box and .list and replace flex-start with space-between on justify-content property and thereafter just added two smaller lines to format it well which are column-gap and row-gap to enerlarge the space between them
Example
main {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 900px;
/* emulate high width */
background-color: red;
}
.list {
display: flex;
flex-wrap: wrap;
background-color: green;
justify-content: space-between;
column-gap: 1px;
row-gap: 25px;
}
.list .box {
width: 300px;
height: 300px;
/*margin: 0 150px 32px 0;*/
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</main>
I'm trying to do a responsive design of a panel consisting of an image and another container with its own internal elements, both side-by-side.
I have a parent div and inside an img and another div tags. Those two children tags have are floated block with a width in % and that works.
The problem is, when I shrink the page, the img shrinks to respect the % width rule and so does its height and it should stay that way, but the div on the side doesn't change its height to be the same as the sibling image.
I wrapped them in another div and put the internal div at height: 100% in hope that would do the trick but nothing.
I'd like to get the right div to change its height according to the left image.
.img-container {
display: block;
width: 59%;
float: left;
}
img {
width: 100%;
}
.product-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 41%;
float: left;
background-color: #e4d233;
}
.product-img {
width: 45%
}
<div class="imgProductContainer">
<div class="img-container">
<img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5815.png"/>
</div>
<div class="product-container">
<img id="product2Img" class="product-img" src="http://pluspng.com/img-png/png-gym-shoes-shoe-away-hunger-is-a-partnering-program-where-footwear-is-turned-around-to-provide-an-eco-friendly-means-of-support-for-our-feeding-the-futures-programs-520.png">
<p><span id="product2Name"></span><br>
<span>2.00 €</span></p>
</div>
</div>
.imgProductContainer {
display: flex;
flex-direction: row;
/*
justify-content: center;
align-items: center;
*/
}
.img-container {
width: 59%;
}
img {
width: 100%;
}
.product-container {
width: 41%;
background-color: #e4d233;
}
.product-img {
width: 45%
}
<div class="imgProductContainer">
<div class="img-container">
<img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5815.png" />
</div>
<div class="product-container">
<img id="product2Img" class="product-img" src="http://pluspng.com/img-png/png-gym-shoes-shoe-away-hunger-is-a-partnering-program-where-footwear-is-turned-around-to-provide-an-eco-friendly-means-of-support-for-our-feeding-the-futures-programs-520.png">
<p><span id="product2Name"></span><br>
<span>2.00 €</span></p>
</div>
</div>
i guess thats how it should look like ?
i am not sure what .product-img class was for so i replaced productImg class with it.
i also removed all floats an just made the main container a flex box with its child aligned, you should look deeper into flexbox if you want something else here.
hope it helps
You can force equal height for the containers using CSS Grid:
.img-container {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
width: 100%;
}
.imgProductContainer {
display: grid;
grid-template-columns: 1fr 1fr;
}
.product-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
background-color: #e4d233;
}
.product-img {
width: 100%;
}
<div class="imgProductContainer">
<div class="img-container">
<img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5815.png"/>
</div>
<div class="product-container">
<img id="product2Img" class="productImg" src="http://pluspng.com/img-png/png-gym-shoes-shoe-away-hunger-is-a-partnering-program-where-footwear-is-turned-around-to-provide-an-eco-friendly-means-of-support-for-our-feeding-the-futures-programs-520.png">
<p><span id="product2Name"></span><br>
<span>2.00 €</span></p>
</div>
</div>