i have following issue, that i can not solve some days, i not so long in coding, so i do not cnow how i should solve this problem, i have had search many hours, but i do not find the solution.
The problem is that i need to create
blocks, that shoud have same height, but they should be responsive to the body and stay under each other.
Here i create with paint some examples, how it should see and that is should be responsive to the width of the webpage, the div elements should expand in height, if the width of the page get smaller.
I hope somebody have the solution.
(p.s flex-box do not solve the problem, i do not nead div elements in the same line and it should be pure css and html.)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
background-color: lightgreen;
}
@media only screen and (max-width: 600px) {
div {
background-color: lightblue;
max-height:600px;
max-width:100px;
}
}
</style>
</head>
<body>
<div>
<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</div>
<div>
<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</div>
</body>
</html>
Flex-box will do exactly what you want to accomplish.
There’s a property called flex-direction that you can set as “column” so you will enforce your flex item to sit one on top of the other, opposed to the default value of “row” that will place your element on the same line.
i have try it already), flex-box column but the problem is, that the div block have not the same size, i need that they have same height size, for example, the page width change from 1920 to 1650 px width and for example the middle div change his height parameters, because the text break up the line, so the other div blocks shoud get the same height like the middle div element.
I hope you understand what i mean.
you can use css grid for that purpose. I used it to make same height grids for product landing page as well as for personal portfolio projects section. Secondly, you can give a height and width to the div class/ id in your css if you do not want to use grid or flexbox
thank you, to set height is not a solution, it should be auto responsive, it should change the div height, if i will set a height, the text will overflow the div box and that is not what i need. i have tryed with grid, but the grid system is not responsive, for example i have line 1 and 2, and the second get heigher, beacuase it have more text, the first grid element will not change its height. Grid example
because one div element can have at width of 650px a height of 500px a another 400 px height, and in a resolution of 1920px have the first div element heigth of 500px, the second only 300px, yes i can set the min height, but so i shoud to know the maximum heightpoint of a div element on each pixel width, that is unrealistic and second the div content does change his height, so if it looks good at 650px width and 500px height good, so in fullhd resolution it looks bad. that is the problem.
Then I’m afraid that if having all the divs with different height (which btw is the norm ) then you would need to rely on Javascript to calculate the max height at runtime and enforce it on each element.
thank you too, but here, you set a height to the grid item, if the content gets bigger it overflow the box, like here. And i need that all items get automatically the same height if one element grow in height. here a example: grid overflow
thank you very much, that is it what i need. Here i modified the width of the grid item, and now it changes in every side, height and width adapt automatically to the size of the webpage: grid responsive.
) then you would need to rely on Javascript to calculate the max height at runtime and enforce it on each element.