[R3gulate]

I'm sorry if this is a simple solution but I can't seem to figure it out. I've looked around online but can't seem to find a solution. I'm developing a simple galley/portfolio webpage.

So I have a parent div with one inside holding all of the images. My focus is on making sure this works on mobile along with desktop. When transitioning to the scale for mobile devices the Div inside the parent expands height downward with the images inside but the parent height doesn't change making a white area halfway down the page. I'm sorry if my explanation doesn't make sense I have little to no experience with this. Below has my current code and images.

HTML:

Code

<div class="content">
<div class="contentbody">

<div class="gallerydes">
<a href="./img/sam1.jpeg"><img src="./img/sam1.jpeg"></a>
<a href="./img/sam1.jpeg"><img src="./img/sam1.jpeg"></a>
<a href="./img/sam1.jpeg"><img src="./img/sam1.jpeg"></a>
<a href="./img/sam1.jpeg"><img src="./img/sam1.jpeg"></a>
<a href="./img/sam1.jpeg"><img src="./img/sam1.jpeg"></a>
<a href="./img/sam1.jpeg"><img src="./img/sam1.jpeg"></a>
<a href="./img/sam1.jpeg"><img src="./img/sam1.jpeg"></a>
<a href="./img/sam1.jpeg"><img src="./img/sam1.jpeg"></a>
<a href="./img/sam1.jpeg"><img src="./img/sam1.jpeg"></a>
<a href="./img/sam1.jpeg"><img src="./img/sam1.jpeg"></a>
<a href="./img/sam1.jpeg"><img src="./img/sam1.jpeg"></a>
<a href="./img/sam1.jpeg"><img src="./img/sam1.jpeg"></a>

</div>

<div class="footer">

</div>
</div>

CSS:

Code

.content {
text-align: center;
 width: 100%;
 height: 100%;
 text-align: center;
 background: #48B8AD;
 color: #48B8AD;
 font-size: 30px;
 vertical-align: middle;

}

.contentbody {
 padding: .5%;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
 width: 90%;

 text-align: center;
 background: #7948B8;
 color: #7948B8;
 font-size: 30px;
 position: absolute;
 left: 5%;
 display: inline-block;

 

}

Images:
Spoiler (Click to View)


Thanks in advance if anyone can help!

[Herbert]

I've had a similar issue in the past, couldn't figure it out either, anyone who can help?

[encryptedhost]

so you want the green BG to extend with it?

[R3gulate]

so you want the green BG to extend with it?

Yes. I got it to work with deleting the child Div and just placing the images in the parent. But originally wanted the images placed inside of the child div and the green. Now thinking of it I guess I could just set the entire background to one color instead of worrying about the specific DIV.

[ramifenili]

Hi! I can't see the problem live, could you create JSFiddle to view it?