When designing a responsive webpage, I encountered an issue with the body element not properly expanding the content vertically. Despite enlarging the web content horizontally, the body failed to adjust its height accordingly, resulting in unwanted black areas on the page.
body {
background-color: black;
padding-bottom: 10vh;
padding-top: 10vh;
padding-right: 10vh;
padding-left: 10vh;
margin: 0;
height: 100%;
align-content: center;
justify-content: center;
position: relative;
}
#wrapper {
position: static;
align-items: center;
height: 100%;
width: 100%;
align-content: center;
display: flex;
flex-direction: row;
margin: 0 auto;
justify-content: center;
overflow: auto;
}
#wrapper2 {
align-items: center;
width: 100%;
height: 100%;
align-content: center;
display: flex;
flex-direction: row;
margin: 0 auto;
justify-content: center;
overflow: auto;
}
img {
width: 100%;
height: 100%;
display: block;
}
.cell1 {
width: calc(100% / 3);
text-align: center;
background-size: contain;
height: 100%;
background-position: center;
position: relative;
}
.cell2 {
width: calc(100% / 3);
text-align: center;
background-size: contain;
height: 100%;
background-position: center;
position: relative;
}
.cell3 {
width: calc(100% / 3);
text-align: center;
background-size: contain;
height: 100%;
background-position: center;
position: relative;
}
.dogname {
color: white;
top: 20px;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
position: absolute;
width: 100%;
margin: 0;
}
.dogtext {
color: white;
top: 0;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
position: relative;
width: 100%;
margin-bottom: 30px;
margin-top: 0px;
display: none;
}
@media screen and (max-width: 500px) {
#wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
#wrapper2 {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.cell1 {
width: 100vw;
}
.cell2 {
width: 100vw;
}
.cell3 {
width: 100vw;
}
.dogname {
display: none;
}
.dogtext {
display: block;
}
body {
background-color: black;
height: 100%;
padding: 0;
margin: 0;
}
}<body>
<div id="wrapper">
<div class="cell1">
<p class="dogname">David Neal</p>
<img src="images/image1.jpg" />
</div>
<p class="dogtext">After the hunt (1870) by David Neal</p>
<div class="cell2">
<p class="dogname">BG Tiepolo</p>
<img src="images/image2.jpg" />
</div>
<p class="dogtext">Portrait of a Toy Spaniel Belonging to the Infanta Maria Josefa of Bourbon (1763) by Giovanni Battista Tiepolo</p>
<div class="cell3">
<p class="dogname">AF Desportes</p>
<img src="images/image3.jpg" />
<p class="dogtext">Chienne blanche devant un buisson de sureau (1714) by Alexandre-François Desportes</p>
</div>
</div>
<div id="wrapper2">
<div class="cell1">
<p class="dogname">JC Merck</p>
<img src="images/image4.jpg" />
<p class="dogtext">Ulmer Dogge (1705) by Johann Christof Merck</p>
</div>
<div class="cell2">
<p class="dogname">John Wootton</p>
<img src="images/image5.jpg" />
<p class="dogtext">A Grey Spotted Hound (1738) by John Wootton</p>
</div>
<div class="cell3">
<p class="dogname">EH Landseer</p>
<img src="images/image6.jpg" />
<p class="dogtext">A Distinguished Member of the Humane Society (1838) by Edwin Henry Landseer</p>
</div>
</div>
</body>