So, I'm having this problem, when I added a background image to a flexbox column, I can see that there is a big blank space at the bottom at the bottom, I tried to inspect the page but could not find the problem. I have no idea what to do nor how to fix the problem, what I want to do is remove the blank space or make the picture go down all the way. Any help is greatly appreciated.
body {
background-color: rgb(245, 245, 245);
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.main {
display: flex;
justify-content: space-evenly;
}
.row {
flex: 50%;
padding: 3em;
padding-left: 15em;
}
.row1 {
flex: 50%;
}
.row-text-top {
padding-bottom: 1em;
font-size: 21px;
}
.row-text-mid {
padding-bottom: 3em;
font-size: 16px;
}
.row-text-mid1 {
font-size: 25px;
border-left: 5px solid #ff9b7c;
padding: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.row-text-low {
padding-top: 3em;
}
.row1 {
background-image: url(earth.jpg);
background-size: cover;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="wwd.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
</head>
<body>
<div >
<div >
<h1>Overview</h1>
<div >
One of the most urgent issues of our time, climate change has widespread implications — from the exacerbation of
poverty, to the breakdown of infrastructure, to the loss of environmental, political, economic and social security.
Experts agree that climate change threatens to set back development efforts by decades, placing least developed countries
and already-vulnerable populations in an even more precarious position.
</div>
<div >
The latest Intergovernmental Panel on Climate Change (IPCC) Fifth Assessment Report (AR5), signed
off by almost 200 nations, concludes with 95% certainty or more that humans have caused the majority
of climate change since the 1950s. It predicts global surface temperature to continue to rise, along
with increased sea level rise, melting of glaciers and ice sheets, acidification of oceans, increase
in the intensity of tropical storms and changes in precipitation patterns.
</div>
<div >
In other words; the science on climate change is clearer than ever, and so is the urgency for human action.
</div>
<div >
As a global community, we all have a role in developing and implementing solutions toward significant
transformation in our development patterns. It requires not only a shift in awareness and accountability
for our own individual choices but in a social, political and economic shift towards enabling conditions
for these sustainable choices to be made– and in turn, a more just, equal and healthy planet.
</div>
</div>
<div >
</div>
</div>
</body>
</html>I'ts a bit hard to see because of the image not being there but I will add a picture aswell:
CodePudding user response：
The issue is here:
.row {
flex: 50%;
padding: 3em; <---- This line
padding-left: 15em;
}
You're adding additional padding all around the row element, including the bottom. After removing this padding, the space at the bottom of the screen is gone.
Here's a working demo: https://codepen.io/Lissy93/pen/yLvBJLe
Tip: I recommend using the developer tools, with the element selector you can hover over the space, and it will show exactly which element is causing it, and show whether it is (green for) padding and (orange for) margin.
CodePudding user response：
View this snippet fullscreen. The dashed red border is the limit of your flexbox. The space below the image (based on your image) is elsewhere.
body {
background-color: rgb(245, 245, 245);
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.main {
display: flex;
justify-content: space-evenly;
border: 5px dashed red;
}
.row {
flex: 50%;
padding: 3em;
/* padding-left: 15em;*/
}
.row1 {
flex: 50%;
}
.row-text-top {
padding-bottom: 1em;
font-size: 21px;
}
.row-text-mid {
padding-bottom: 3em;
font-size: 16px;
}
.row-text-mid1 {
font-size: 25px;
border-left: 5px solid #ff9b7c;
padding: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.row-text-low {
padding-top: 3em;
}
.row1 {
background-image: url(https://picsum.photos/id/1/200/300);
background-size: cover;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="wwd.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
</head>
<body>
<div >
<div >
<h1>Overview</h1>
<div >
One of the most urgent issues of our time, climate change has widespread implications — from the exacerbation of poverty, to the breakdown of infrastructure, to the loss of environmental, political, economic and social security. Experts agree that climate
change threatens to set back development efforts by decades, placing least developed countries and already-vulnerable populations in an even more precarious position.
</div>
<div >
The latest Intergovernmental Panel on Climate Change (IPCC) Fifth Assessment Report (AR5), signed off by almost 200 nations, concludes with 95% certainty or more that humans have caused the majority of climate change since the 1950s. It predicts global
surface temperature to continue to rise, along with increased sea level rise, melting of glaciers and ice sheets, acidification of oceans, increase in the intensity of tropical storms and changes in precipitation patterns.
</div>
<div >
In other words; the science on climate change is clearer than ever, and so is the urgency for human action.
</div>
<div >
As a global community, we all have a role in developing and implementing solutions toward significant transformation in our development patterns. It requires not only a shift in awareness and accountability for our own individual choices but in a social,
political and economic shift towards enabling conditions for these sustainable choices to be made– and in turn, a more just, equal and healthy planet.
</div>
</div>
<div >
</div>
</div>
</body>
</html>CodePudding user response：
I dont see any space on the bottom. I using firefox on linux.
body {
background-color: rgb(245, 245, 245);
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.main {
display: flex;
justify-content: space-evenly;
}
.row {
flex: 50%;
padding: 3em;
padding-left: 15em;
}
.row1 {
flex: 50%;
}
.row-text-top {
padding-bottom: 1em;
font-size: 21px;
}
.row-text-mid {
padding-bottom: 3em;
font-size: 16px;
}
.row-text-mid1 {
font-size: 25px;
border-left: 5px solid #ff9b7c;
padding: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.row-text-low {
padding-top: 3em;
}
.row1 {
background-image: url(https://via.placeholder.com/200);
background-size: cover;
} <div >
<div >
<h1>Overview</h1>
<div >
One of the most urgent issues of our time, climate change has widespread implications — from the exacerbation of
poverty, to the breakdown of infrastructure, to the loss of environmental, political, economic and social security.
Experts agree that climate change threatens to set back development efforts by decades, placing least developed countries
and already-vulnerable populations in an even more precarious position.
</div>
<div >
The latest Intergovernmental Panel on Climate Change (IPCC) Fifth Assessment Report (AR5), signed
off by almost 200 nations, concludes with 95% certainty or more that humans have caused the majority
of climate change since the 1950s. It predicts global surface temperature to continue to rise, along
with increased sea level rise, melting of glaciers and ice sheets, acidification of oceans, increase
in the intensity of tropical storms and changes in precipitation patterns.
</div>
<div >
In other words; the science on climate change is clearer than ever, and so is the urgency for human action.
</div>
<div >
As a global community, we all have a role in developing and implementing solutions toward significant
transformation in our development patterns. It requires not only a shift in awareness and accountability
for our own individual choices but in a social, political and economic shift towards enabling conditions
for these sustainable choices to be made– and in turn, a more just, equal and healthy planet.
</div>
</div>
<div >
</div>
</div>