Answer the question
In order to leave comments, you need to log in
Responsive without media queries. How to avoid empty space when changing screen sizes?
Hello! The task is standard: there are blocks that jump to the line below when the first line is full. Implementing this statically is no problem, but problems arise when the screen width changes. If you do not add flex-grow to blocks (.block): 1; , then when the screen width decreases, one of the blocks jumps down and an empty space remains in its place. If we add flex-grow to .block: 1; , then the blocks normally distribute the free space of the line among themselves, however, the problem is that not all lines have the same number of blocks, which causes some blocks to become too wide. How can I make the blocks share the free space of the line among themselves, but at the same time they do not grow more than a certain size? Is it possible to implement this without media queries?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="section2">
<div class="aboutus">
<div class="block">
<div class="icon"></div>
<div class="text">
<h3>Designed for developers</h3>
<div class="txt">Outline a benefit here. Tell users what your plugin/software can do for them. You can change the icon above to any of the 400+ FontAwesome icons available.</div>
</div>
</div>
<div class="block">
<div class="icon"></div>
<div class="text">
<h3>Designed for developers</h3>
<div class="txt">Outline a benefit here. Tell users what your plugin/software can do for them. You can change the icon above to any of the 400+ FontAwesome icons available.</div>
</div>
</div>
<div class="block">
<div class="icon"></div>
<div class="text">
<h3>Designed for developers</h3>
<div class="txt">Outline a benefit here. Tell users what your plugin/software can do for them. You can change the icon above to any of the 400+ FontAwesome icons available.</div>
</div>
</div>
<div class="block">
<div class="icon"></div>
<div class="text">
<h3>Designed for developers</h3>
<div class="txt">Outline a benefit here. Tell users what your plugin/software can do for them. You can change the icon above to any of the 400+ FontAwesome icons available.</div>
</div>
</div>
<div class="block">
<div class="icon"></div>
<div class="text">
<h3>Designed for developers</h3>
<div class="txt">Outline a benefit here. Tell users what your plugin/software can do for them. You can change the icon above to any of the 400+ FontAwesome icons available.</div>
</div>
</div>
<div class="block">
<div class="icon"></div>
<div class="text">
<h3>Designed for developers</h3>
<div class="txt">Outline a benefit here. Tell users what your plugin/software can do for them. You can change the icon above to any of the 400+ FontAwesome icons available.</div>
</div>
</div>
<div class="block">
<div class="icon"></div>
<div class="text">
<h3>Designed for developers</h3>
<div class="txt">Outline a benefit here. Tell users what your plugin/software can do for them. You can change the icon above to any of the 400+ FontAwesome icons available.</div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.aboutus {
padding: 70px 150px;
display: flex;
flex-wrap: wrap;
}
.block {
margin: 15px;
margin-bottom: 30px;
width: calc(33.333% - 30px);
min-width: 240px;
display: flex;
}
.icon {
width: 25px;
height: 25px;
flex-shrink: 0;
background-color: #094f68;
margin-right: 20px;
}
Answer the question
In order to leave comments, you need to log in
Everything is possible.
Use the main option on grids, additionally fallback on flexes via @supports. Fallback will naturally be slightly different in behavior and appearance from the main version, but the content will remain accessible, this is the main thing.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question