I want to center my text inside the flex items horizontally and vertically. I've looked around everywhere and tried a lot of things but so far nothing seems to work...
Could I nest another flexbox-container inside the existing one?
html, body {
height: 100%;
margin: 0;
}
.flex-container {
height: 100%;
display: flex;
flex-direction: column;
}
.page1 {
flex-grow: 1;
min-height: 100%;
background: lightblue;
}
#text1 {
font-size: 160%;
color: white;
font-family: roboto, sans-serif;
}
.page2 {
flex-grow: 1;
min-height: 100%;
background: cyan;
}
.page3 {
flex-grow: 1;
min-height: 100%;
background: lightgreen;
}
.page3 {
flex-grow: 1;
min-height: 100%;
background: lightgreen;
}
<div class="flex-container">
<div class="page1">
<p id="text1">blabla bla blablabla.</p>
</div>
<div class="page2"></div>
<div class="page3"></div>
</div>
Yes, make the flex-items also flex-containers as seen below. I also added margin: auto to #text1 to center it.
html, body {
height: 100%;
margin: 0;
}
.flex-container {
height: 100%;
display: flex;
flex-direction: column;
}
.page1 {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 100%;
background: lightblue;
}
#text1 {
margin: auto;
font-size: 160%;
color: white;
font-family: roboto, sans-serif;
}
.page2 {
flex-grow: 1;
min-height: 100%;
background: cyan;
}
.page3 {
flex-grow: 1;
min-height: 100%;
background: lightgreen;
}
.page3 {
flex-grow: 1;
min-height: 100%;
background: lightgreen;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Portfolio </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="flex-container">
<div class="page1">
<p id="text1"> blabla bla blablabla. </p>
</div>
<div class="page2">
</div>
<div class="page3">
</div>
</div>
</body>
</html>
Related
I am sure this is really easy but I am facing issue the image is overflowing the card-box section
Wanted to achieve similar to this
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", "sans-serif";
}
body{
background-color: hsl(30, 38%, 92%);
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
border: 1px solid black;
}
.product{
display: flex;
max-width: 700px;
/* justify-content: center;
align-items: center; */
}
.card-box {
margin: 1em 2em;
max-width: 400px;
background-color: white;
border-radius: 1.5em;
border: 1px solid green;
}
.image{
height: 100vh;
width: 50vw;
background-color: aqua;
}
img{
max-width: 100%;
height:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product</title>
</head>
<body>
<div class="container">
<section class="card-box">
<section class="image">
<img src="https://codehelp-product-card.netlify.app/images/mug.jpg" alt="" class="cofee-mug">
</section>
<section class="details">
<p>coffee mug</p>
</section>
</section>
</div>
</body>
</html>
tried to change height and width of container, tried changing display of image class to block but no change is shown in output
My output:
enter image description here
Expecting
enter image description here
I'm not sure flex is the best answer to do that. Personally I would prefer grid.
Display grid for the card, position left and right (image, details) inside.
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", "sans-serif";
}
body {
background-color: hsl(30, 38%, 92%);
}
.container {
display: flex;
justify-content: center;
position: relative;
z-index: -1;
border: 1px solid black;
}
.product {
display: flex;
max-width: 700px;
/* justify-content: center;
align-items: center; */
}
.card-box {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
margin: 1em 2em;
max-width: 400px;
background-color: white;
border-radius: 1.5em;
border: 1px solid green;
}
.image {
grid-area: 1 / 1 / 2 / 2;
height: 100%;
width: auto;
}
.details {
grid-area: 1 / 2 / 2 / 3;
}
img {
max-width: 100%;
height: 100%;
border-radius: 1.5em 0 0 1.5em;
}
<div class="container">
<section class="card-box">
<section class="image">
<img src="https://codehelp-product-card.netlify.app/images/mug.jpg" alt="" class="cofee-mug">
</section>
<section class="details">
<p>coffee mug</p>
</section>
</section>
</div>
This may be a way to solve it: just add style="overflow:hidden;" to your code. Or you can try to use "border-radius:20px;" to hide it.
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", "sans-serif";
}
body{
background-color: hsl(30, 38%, 92%);
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
border: 1px solid black;
}
.product{
display: flex;
max-width: 700px;
/* justify-content: center;
align-items: center; */
}
.card-box {
margin: 1em 2em;
max-width: 400px;
background-color: white;
border-radius: 1.5em;
border: 1px solid green;
}
.image{
height: 100vh;
width: 50vw;
background-color: aqua;
}
img{
max-width: 100%;
height:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product</title>
</head>
<body>
<div class="container">
<section class="card-box" style="overflow:hidden;">
<section class="image">
<img src="https://codehelp-product-card.netlify.app/images/mug.jpg" alt="" class="cofee-mug">
</section>
<section class="details">
<p>coffee mug</p>
</section>
</section>
</div>
</body>
</html>
I want to make 3 column layout with flex box. The goal is to make first and last div widths dynamic. But the 2nd div max-width is static.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body{
min-height: 100% !important;
height: 100%;
}
body{
margin: 0;
background-color: #ddd;
display: flex;
justify-content: space-between;
}
.left , .center, .right{
height: 100%;
}
.left{
width: auto;
background-color: antiquewhite;
}
.center{
display: flex;
min-height: 100vh;
flex-direction: column;
width: 100%;
max-width: 1200px;
background-color: green;
}
.right{
width: auto;
background-color: blue;
}
</style>
</head>
<body>
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</body>
</html>
Now I am getting the center max width is constant that I expected. But left & right div's not appear always. I want to make right & left div appear with dynamic width that based on browser window size.
Update - current layout:
Expected layout:
How can I make it work?
Here you go.
Just apply flex:1 to all of the divs but flex: 1 0 100%; to the center div so it defaults to as wide as it can before hitting the max-width you wanted.
html,
body {
min-height: 100% !important;
height: 100%;
}
body {
margin: 0;
background-color: #ddd;
display: flex;
}
.left,
.center,
.right {
flex: 1;
height: 100%;
}
.left {
width: auto;
background-color: red
}
.center {
display: flex;
min-height: 100vh;
flex-direction: column;
flex: 1 0 100%;
width: 100%;
max-width: 1200px;
background-color: green;
}
.right {
width: auto;
background-color: blue;
}
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
does this help?
.flex-container {
display: flex;
justify-content: space-between;
background-color: DodgerBlue;
}
.flex-container > .side {
background-color: green;
width: 100%;
}
.flex-container > .center {
background-color: #f1f1f1;
color: green;
max-width: : 100%;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<div class="side"></div>
<div class="center">
this will expand as your content grows
</div>
<div class="side"></div>
</div>
</body>
</html>
I am trying to fit 4 divs within the view bounds of a non-scrolling column flexbox but I can't seem to get it working.
What I want:
What I experience:
I have no idea what I am doing and just randomly permutating flex-related CSS fields to try and fix it haha. If someone could point out what is wrong I would love you forever.
Here is the gist of my code:
body {
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
#flexcontent {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
#header #firstContent #secondContent {
flex: 1 1 auto;
}
#header {
background-color: green;
font-weight: 700;
align-content: center;
font-size: 7rem;
}
#firstContent {
background-color: red;
}
#secondContent {
background-color: yellow;
}
#picture {
background-color: blue;
flex: 0 1 auto;
}
<body>
<div id="flexcontainer">
<div id="header">Title</div>
<div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg"/></div>
<div id="firstContent">first</div>
<div id="secondContent">second</div>
</div>
</body>
Try this below. And use object-fit if image doesn't expand or shrink as expected or aspect ratio changes.
#flexcontainer {
display: flex;
flex-direction: column;
height: 100vh;
}
#picture {
flex: 1;
min-height: 0;
}
body {
margin: 0;
}
img {
object-fit: contain;
height: 100%;
width: auto;
}
<div id="flexcontainer">
<div id="header">Title</div>
<div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
<div id="firstContent">first</div>
<div id="secondContent">second</div>
</div>
Please check your container div id
<div id="flexcontainer">
change
#flexcontent {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
to
#flexcontainer {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
try object-fit for img
img {
object-fit: contain;
height: 100%;
}
there is a few thing to fix in your CSS, typo and value used
html, /* to inherit height */
body {
margin: 0;
width: 100%;
height: 100%;
}
#flexcontainer {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 0; /* force size calculation*/
}
#header,/* you meant each one of them */
#firstContent,
#secondContent {
flex: 1;
margin: 2px 5vw;/* for demo */
}
#header {
background-color: green;
font-weight: 700;
/* align-content: center; or did you forget display:flex here */
font-size: calc(1rem + 2vw);
}
#firstContent {
background-color: red;
}
#secondContent {
background-color: yellow;
}
#picture {
display: flex;
min-height: 0; /* force size calculation*/
}
img {
max-height: 90%;/* whatever */
margin: auto;/* or align-content + justify-content : center on flex parent*/
}
<div id="flexcontainer">
<div id="header">Title</div>
<div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
<div id="firstContent">first</div>
<div id="secondContent">second</div>
</div>
Allow the item holding the image to shrink below its content size.
Define the parameters of the image.
(Tested in Chrome, Firefox and Edge.)
#flexcontainer {
display: flex;
flex-direction: column;
height: 100vh;
}
#picture {
min-height: 0;
background-color: blue;
}
#picture>img {
width: 100%;
max-height: 100%;
object-fit: contain;
}
#header {
background-color: green;
font-weight: 700;
font-size: 7rem;
}
#firstContent {
background-color: red;
}
#secondContent {
background-color: yellow;
}
body {
margin: 0;
}
<div id="flexcontainer">
<div id="header">Title</div>
<div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
<div id="firstContent">first</div>
<div id="secondContent">second</div>
</div>
jsFiddle demo
I've tidied up your html a little and simplified the CSS. You want to take the overflow: hidden off of the body tag, and give each of your elements a class instead of an id. Finally, simplify the image section by making the image tag itself a flexbox item:
html,
body {
height: 100%
}
body {
/*overflow: hidden;*/
margin: 0;
}
.flexContainer {
display: flex;
flex-direction: column;
height: 100%;
}
.flexContainer__header,
.flexContainer__firstContent,
.flexContainer__secondContent {
flex: 1 1 auto;
}
.flexContainer__header {
background-color: green;
font-weight: 700;
align-content: center;
font-size: 7rem;
}
.flexContainer__firstContent {
background-color: red;
}
.flexContainer__secondContent {
background-color: yellow;
}
.flexContainer__picture {
display: block;
width: 100%;
}
<div class="flexContainer">
<div class="flexContainer__header">Title</div>
<img class="flexContainer__picture" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" />
<div class="flexContainer__firstContent">first</div>
<div class="flexContainer__secondContent">second</div>
</div>
I'm new to css and I'm trying to create a 3-col layout. There should be a centered footer too.
The total height of the page should fill the screen which it currently does. The width seems off.
Currently the footer seems misaligned in both dimensions and positioning.
I have attached the design I'm trying to build. thankful for any pointers!
.container {
display: flex;
flex-direction: row;
width: 100vw;
height: 100vh;
}
body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
}
.left {
background-color: gainsboro;
width: 20%;
}
.center {
background-color: white;
width: 60%;
}
.right {
background-color: gainsboro;
width: 20%;
}
.footer {
height: 20px;
margin-left: 20%;
margin-right: 20%;
text-align: center;
width: 60%;
background-color: red;
}
<body>
<div class="container">
<div class="left"></div>
<div class="center">Bla bla bla bla bla</div>
<div class="right"></div>
</div>
<div class="footer">this is a footer!</div>
</body>
If you need the footer to be at the bottom of your center column, place it inside it. With display: flex in .center you can use margin-top: auto in the .footer to push it to the bottom.
.container {
display: flex;
flex-direction: row;
width: 100vw;
height: 100vh;
}
body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
}
.left {
background-color: gainsboro;
width: 20%;
}
.center {
display: flex;
flex-direction: column;
background-color: white;
width: 60%;
}
.right {
background-color: gainsboro;
width: 20%;
}
.footer {
width: 100%;
height: 20px;
margin-top: auto;
text-align: center;
background-color: red;
}
<body>
<div class="container">
<div class="left"></div>
<div class="center">
Bla bla bla bla bla
<div class="footer">this is a footer!</div>
</div>
<div class="right"></div>
</div>
</body>
On my home page I have a full width background image, however, my content won't display below it. Rather, it is displaying over top of the background image. Can anyone help me make my content display below my background image?
This is my html code:
<html>
<title>PLR.com Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.homepage-backgroundimage {
z-index: -1;
position: absolute;
background-size: cover;
left:0; right:0; top:0;
margin-left: auto;
margin-right: auto;
display: block;
}
.flexcontainer-bodyarea {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 1000px;
height: 500px;
background-color: #bbb;
}
.flexitem-50ptextarea {
width: 480px;
height: 200px;
margin: 10px;
background-color: #fff;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 36px;
color: #bbb;
}
</style>
<body>
<div class="homepage-backgroundimage"><img src="http://pianolessonresource.com/wp-content/uploads/2017/09/Untitled-1.jpg"></div>
<div class="flexcontainer-bodyarea">
<div class="flexitem-50ptextarea">This is one text area</div>
<div class="flexitem-50ptextarea">This is two text area</div>
</div>
</body>
</html>
Make it a real background image (in the CSS rule, not in an image tag), remove the absolute position for that DIV and give it 100% height:
html,
body {
margin: 0;
height: 100%;
}
.homepage-backgroundimage {
background: url(http://pianolessonresource.com/wp-content/uploads/2017/09/Untitled-1.jpg) center, center;
background-size: cover;
height: 100%;
}
.flexcontainer-bodyarea {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 1000px;
height: 500px;
background-color: #bbb;
}
.flexitem-50ptextarea {
width: 480px;
height: 200px;
margin: 10px;
background-color: #fff;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 36px;
color: #bbb;
}
<div class="homepage-backgroundimage"></div>
<div class="flexcontainer-bodyarea">
<div class="flexitem-50ptextarea">This is one text area</div>
<div class="flexitem-50ptextarea">This is two text area</div>
</div>
Put position:relative instead of position:absolute
Here is the code:
<html>
<title>PLR.com Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.homepage-backgroundimage {
z-index: -1;
position: relative;
background-size: cover;
left:0; right:0; top:0;
margin-left: auto;
margin-right: auto;
display: block;
}
.flexcontainer-bodyarea {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 1000px;
height: 500px;
background-color: #bbb;
}
.flexitem-50ptextarea {
width: 480px;
height: 200px;
margin: 10px;
background-color: #fff;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 36px;
color: #bbb;
}
</style>
<body>
<div class="homepage-backgroundimage"><img src="http://pianolessonresource.com/wp-content/uploads/2017/09/Untitled-1.jpg"></div>
<div class="flexcontainer-bodyarea">
<div class="flexitem-50ptextarea">This is one text area</div>
<div class="flexitem-50ptextarea">This is two text area</div>
</div>