I want using flexbox to contain everything within the second div of the grid. In this case the picture overflows and I don't know why. I would like it to be resized by height and maintain aspect ratio.
body {
height: 100%;
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
background-color: #A9A9A9;
}
.wrapper>div:nth-child(even) {
background-color: #D3D3D3;
}
.pic2 {
display: flex;
flex-direction: column;
}
button {
flex: 1;
min-height: 40px;
background: green;
}
img {
flex: 1;
max-height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div2</div>
<div class="pic2">
<button>Div2</button>
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>
You cannot set min-height for the button in terms you must use div.
Unless it will cause strange overflow problem when you resize the picture. Take I try to resize the window, see if this the effect you want.
body {
height: 100%;
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
background-color: #A9A9A9;
}
.wrapper div{
width:100%;
height:100%;
}
.wrapper > div:nth-child(even) {
background-color: #D3D3D3;
}
.pic2 {
display: flex;
flex-direction: column;
}
button {
flex: 1;
height:30%;
background: green;
}
img {
flex : 1;
max-height: 100%;
}
.custom-img{
display:block;
max-height:70%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div2</div>
<div class="pic2">
<button>Div2</button>
<div class="custom-img">
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>
As you have set your button min-height: 40px when CSS applies the img max-height:100% it is actually getting the parent size, not decreasing the button 40px.
You can set max-height: calc(100% - 40px);, which will apply the parent 100% height minus 40px of the button.
body {
height: 100%;
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
background-color: #A9A9A9;
}
.wrapper>div:nth-child(even) {
background-color: #D3D3D3;
}
.pic2 {
display: flex;
flex-direction: column;
}
button {
flex: 1;
min-height: 40px;
background: green;
}
img {
flex: 1;
max-height: calc(100% - 40px);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div2</div>
<div class="pic2">
<button>Div2</button>
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>
Related
I have a issue with css grid , i build a container with two div in it with css grid and i want to adjust container to page center. I use this code :
html{
width: 100vw;
height : 100vh;
}
body{
height : 100%;
}
.container-fluid{
width:100%;
height : 100%;
display:grid;
grid-template-columns: 300px;
grid-template-rows: 200px auto;
justify-content: center;
align-content: center;
border:1px solid red;
}
.logo-container{
background-color: khaki;
}
.form-container{
height :540px;
background-color: lightblue;
}
<!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">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/media-query.css">
<title>Login & Register User With Profile</title>
</head>
<body>
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
<link rel="stylesheet" href="assets/css/all.css">
</body>
</html>
as you see when grid container height bigger then page height a issue occurs (please see code result).
when use height for body tag , grid height overflowing and when delete height from body tag every thing is ok but in this situ container can't adjust container in center of page.
what is problem?
Simplify your code like below:
body {
margin: 0; /* remove default margin */
}
.container-fluid {
min-height: 100vh; /* at least screen height */
display: grid;
grid-template-columns: 300px;
grid-template-rows: 200px auto;
justify-content: center;
align-content: center;
border: 1px solid red;
box-sizing:border-box; /* to consider the border inside the height */
}
.logo-container {
background-color: khaki;
}
.form-container {
height: 540px;
background-color: lightblue;
}
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
Or like below:
body {
margin: 0;
}
.container-fluid {
height: 100vh; /* full height */
display: grid;
grid-template-columns: 300px;
/* first row at 200px max-height and second row at 540px max-height */
grid-template-rows: minmax(auto,200px) minmax(auto,540px);
justify-content: center;
align-content: center;
border: 1px solid red;
box-sizing:border-box;
}
.logo-container {
background-color: khaki;
}
.form-container {
background-color: lightblue;
}
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
when i try to display blocks in grid then there is space at the end of grid item on right side and there is no space at the start of the grid i.e at the left side . You can see screenshot and code. i cannot figure it out what is the problem. I hope you can figure it out.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projects</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gird-section{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 40px;
background-color: yellow;
}
.grid-item{
background-color: red;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<h1>Grid</h1>
<div class="gird-section">
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</body>
</html>
You can use Css Grid Layout
I have edited your code so you can have yellow space left and right. I added width in the first section in order for the parent to have more with then the child . For more editing I suggest to watch the link above.
<head>
<meta charset="utf-8" />
<title>Projects</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(5, 1fr);
}
#item1 {
background-color: yellow;
grid-column: 1/2;
}
#item2 {
background-color: red;
grid-column: 2/4;
}
#item3 {
background-color: yellow;
grid-column: 4/5;
}
</style>
</head>
<body>
<h1>Grid</h1>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
</body>
</html>
hello i want to make my site responsive.I have divide body in 4 divs. Every 2 divs has the 100% of the screen and the other two has margin-top : 50%;. Now i want everytime max-width = 800px, I want every div to has the fullscreen and the user scroll down to see the other divs. My site is https://frontjim.github.io if you want to see it. thanks is advance and sorry for my bad english.
i have used this but it didnt work
#media screen and (max-width: 800px) {
body,
html {
margin: 0;
padding: 0;
height: 100%;
max-height: 100vh;
display: flex;
flex-direction: row;
flex: 1 1 auto;
min-height: 0;
}
}
.back {
display: flex;
flex-direction: column;
}
.navbar {
width: 100vw;
height: 100vh;
}
.mater {
width: 100vw;
height: 100vh;
}
.cb {
width: 100vw;
height: 100vh;
}
.scroll {
width: 100vw;
height: 100vh;
}
You can have a general container that has child elements. This container has width: 100vw and height: 100vh, and display: flex. You don't need to add flex-direction: row since it's the default.
The children will have width: 100%.
Snippet:
* {
margin: 0;
padding: 0;
}
.flex {
width: 100vw;
height: 100vh;
display: flex;
}
.div1 {
background-color: red;
width: 100%;
}
.div2 {
background-color: blue;
width: 100%;
}
.div3 {
background-color: green;
width: 100%;
}
.div4 {
background-color: grey;
width: 100%;
}
<div class="flex">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="flex">
<div class="div3"></div>
<div class="div4"></div>
</div>
Use CSS Grid, it can get the job done easily
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Responsive Grid</title>
</head>
<body>
<div class="main">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
.main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100vh 100vh;
}
.div1 {
background-color: lightgreen;
}
.div2 {
background-color: lightseagreen;
}
.div3 {
background-color: coral;
}
.div4 {
background-color: lightblue;
}
#media screen and (max-width: 800px) {
.main {
grid-template-columns: 1fr;
grid-template-rows: 100vh 100vh 100vh 100vh;
}
}
Live view: https://codepen.io/zgheibali/pen/ZEWWVvr
I hope that my answer was helpful :)
change the design.use like this:
in html::
<div class='flexyy'>
<div class='div1'>....</div>
<div class='div2'>....</div>
<div class='div3'>....</div>
<div class='div4'>....</div>
</div>
in css::
div1{
width:100%;
}
div2{
width:100%;
}
div3{
width:100%;
}
div4{
width:100%;
}
#media(min-width:800px){
.div1,.div2,.div3,.div4{
width:auto;
}
.flexyy{
display:flex;
flex-direction:row;
flex: 0.5 1 auto;
flex-wrap:wrap;
}
}
Below 767 with I want that the middle columns date, due date and id should stack up one below the other(due date, date, then id or date, due date, and id where due date and id below the date column which is at the middle) which means there should be 3 columns as opposed to five on width above 767.
How to make this happen using css. If there something even better to make this responsive then please share.
Should i create a separate row for mobile and hide it on larger devices.
Or is is possible to work with the same row and make the middle three divs stack one after the other.
#media only screen and (max-width: 767px) {
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.container {
width: 80%;
margin: 0 auto;
border: 1px solid grey;
height: 100%;
}
.invo-to,.due,.date,.id {
float: left;
}
.invo-from {
float: right;
text-align: right;
}
.invo-to {
width: 25%;
}
.due,.date,.id {
width: 16%;
}
.invo-from {
width: 25%;
}
h6 {
font-size: 18px;
margin: 0;
}
p {
font-size: 16px;
}
</style>
<body>
<div class="container">
<div class="invo-to">
<h6>Invoice To</h6>
<p>John Mason</p>
<p>john#gmail.com</p>
</div>
<div class="due">
<h6>Due Date</h6>
<p>11-05-1990</p>
</div>
<div class="date">
<h6>Date</h6>
<p>11-05-1990</p>
</div>
<div class="id">
<h6>Invoice Id</h6>
<p>66</p>
</div>
<div class="invo-from">
<h6>Invoice From</h6>
<p>Xskd Lksdds di LTD</p>
<p>lksdds#gmail.com</p>
</div>
</div>
</body>
</html>
Replace this code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.container {
width: 80%;
margin: 0 auto;
border: 1px solid grey;
padding: 15px;
}
.details {
display: flex;
}
.invo-to {
width: 15%;
}
.invo-from {
width: 20%;
}
.due_date_id {
width: 65%;
display: flex;
justify-content: space-around;
}
h6 {
font-size: 18px;
margin: 0;
}
p {
font-size: 16px;
}
#media screen and (max-width: 767px) {
.container {
width:100%;
}
.due_date_id {
width: 33%;
display: flex;
flex-direction: column;
}
.invo-to {
width: 33%;
}
.invo-from {
width: 33%;
}
}
</style>
<body>
<div class="container">
<div class="details">
<div class="invo-to">
<h6>Invoice To</h6>
<p>John Mason</p>
<p>john#gmail.com</p>
</div>
<div class="due_date_id">
<div class="due">
<h6>Due Date</h6>
<p>11-05-1990</p>
</div>
<div class="date">
<h6>Date</h6>
<p>11-05-1990</p>
</div>
<div class="id">
<h6>Invoice Id</h6>
<p>66</p>
</div>
</div>
<div class="invo-from">
<h6>Invoice From</h6>
<p>Xskd Lksdds di LTD</p>
<p>lksdds#gmail.com</p>
</div>
</div>
</div>
</body>
</html>
In order to create a responsive web page, it's better to use bootstrap, it's much easier and faster way, but if you can't learn bootstrap for the moment, you can use flexbox and media queries.
Flexbox enables you to create responsive layout without using float
property, it is recommanded to learn it because it's very powerfull, in this case you will need 2 properties, display:flex; to enable flexbox and flex-direction:row or flex-direction: column; to set the direction of blocks inside flexbox https://www.w3schools.com/css/css3_flexbox.asp
Media queries to define css properties in certain conditions, it can be used for different type of screens, this tool is very usefull to create responsive websites, to enable it you will need #media condition where condition can be the width of your screen, or the type of the screen ... https://www.w3schools.com/css/css_rwd_mediaqueries.asp
The following code will explain it better:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.container {
width: 90%;
border: 1px solid grey;
margin: 0 auto;
height: 100%;
display:flex;
flex-direction: row;
justify-content: space-between;
}
.invo-from {
padding-right:15px;
text-align: right;
width: 30%;
}
.invo-to {
width: 30%;
padding-left:15px;
}
.due,.date,.id {
width: 100%;
}
h6 {
font-size: 18px;
margin: 0;
}
p {
font-size: 16px;
}
.stacked{
width: 50%;
display:flex;
flex-direction: row;
}
#media screen and (max-width: 767px) {
.stacked{
width: 40%;
text-align:center;
flex-direction: column;
}
}
</style>
<body>
<div class="container">
<div class="invo-to">
<h6>Invoice To</h6>
<p>John Mason</p>
<p>john#gmail.com</p>
</div>
<div class="stacked">
<div class="due">
<h6>Due Date</h6>
<p>11-05-1990</p>
</div>
<div class="date">
<h6>Date</h6>
<p>11-05-1990</p>
</div>
<div class="id">
<h6>Invoice Id</h6>
<p>66</p>
</div>
</div>
<div class="invo-from">
<h6>Invoice From</h6>
<p>Xskd Lksdds di LTD</p>
<p>lksdds#gmail.com</p>
</div>
</div>
</body>
</html>
I'm trying to insert a picture within a div within a grid layout and I want the height of the picture to always match exactly the height of the div. However I can't get the image to respect the boundaries of it's parent div. Most of the times it overlaps the grid and if I use overflow:hidden it just crops the image. I want it to maintain the aspect ratio.
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
}
.wrapper {
background-color: #A9A9A9;
}
.wrapper > div:nth-child(even) {
background-color: #D3D3D3;
}
.img_div {
position:relative;
display: inline-block;
height: 100%;
width: 100%
}
.img_div > img {
position: absolute;
width: auto;
height: auto;
margin: auto;
min-height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div1</div>
<div class="pic2">Div2
<div class="img_div">
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>
The extra child .img_div is probably not needed, but to keep same structure, I updated your css to make it display: inline and changed the .img_div > img styles, removing display: absolute; and changed min-height: 100%; to max-height: 100%; adding max-width: 100%; as well.
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
}
.wrapper {
background-color: #A9A9A9;
}
.wrapper > div:nth-child(even) {
background-color: #D3D3D3;
}
.img_div {
position:relative;
display: inline;
height: 100%;
width: 100%
}
.img_div > img {
width: auto;
height: auto;
margin: auto;
max-height: 100%;
max-width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div1</div>
<div class="pic2">Div2
<div class="img_div">
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>
You could also leave .img_div as display: inline-block if you'd prefer, but would need to remove its width: 100%;
Also, you may need to adjust vertical alignment depending on your use case.
I think I found the solution based on this article here.
https://www.whitebyte.info/programming/css/how-to-make-a-div-take-the-remaining-height
Basically setting every div to display:table and then putting every container inside that div as a table-row. That will fill the rest of the height of the gris
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
}
.wrapper {
background-color: #A9A9A9;
}
.wrapper > div {
text-align: center;
display: table;
height: 100%;
}
.wrapper > div:nth-child(even) {
background-color: #D3D3D3;
}
.img_div {
display: table-row;
height: 100%;
width: 100%;
}
.img_div > img {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div1</div>
<div class="pic2">Div2
<div class="img_div">
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>