Brandon Brandon -4 years ago 65
CSS Question

Making a page w/ divs, images, video responsive

First off, there's a bit of CSS in this so I apologize for having to read through that. I'm still trying to learn this stuff.

For the most part, the page is responsive in the sense that I can scale it down and it adapts. However, it seems like once it hits that type of iphone resolution or it gets too small, some of the text starts disappearing, the image in the header disappears and the video that should be in the right div moves down to the footer. I'm not sure how to prevent that. Link to jsfiddle below

HTML:

<div id="wrap">
<div id="headerBlock">
<div class="headerText"><h2 style="color:white">Header or something</h2>Blah blah text text blah blah</div>
<div class="headerImg"><img src="/someimage.jpg" height="250" width="300">
</div>
</div>

<div id="leftBlock">
<img src="/sample.png" height="300" width="300">
</div>

<div id="rightBlock">
<div class="rightText">More text, more text, blah blah blah - video below this
</div>
<div class="rightVideo">
<video autoplay loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div>
</div>
<div id="footerBlock">
<p>Footer Text!</p>
</div>




CSS:

#wrap {
margin: 0 auto;
max-width: 1200px;
overflow: hidden;
float: left;
}

#headerBlock {
height: 300px;
background: #776b68;
display: flex;
align-items: center;
}

div.headerText {
display: inline-block;
padding-right: 150px;
padding-left: 20px;
}

div.headerImg {
display: inline-block;
padding-right: 100px;
}

#leftBlock {
width: 50%;
height: 500px;
background-color: black;
float: left;
position: relative;
}

#leftBlock img {
position: absolute;
top: 50%;
left: 50%;
transition: transform 7s;
transform: translate(-50%,-50%);
}

#leftBlock img:hover {
transform: translate(-50%,-50%) scale(1.8);
}

#rightBlock {
width: 50%;
height: 500px;
background: #8ab78f;
float: left;
position: relative;
}

div.rightText {
padding: 20px 20px 0px 20px;
}

div.rightVideo {
padding: 35px 10px 0 40px;
}

video {
width: 100%;
max-width: 500px;
height: auto;
}


#footerBlock {
height: 200px;
background: #29342a ;
clear: left;
}

#footerBlock p {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
font-size: 26px;
text-align: center;
padding-top: 6%;
color: white;
}


https://jsfiddle.net/4Lk7odtu/1/

Answer Source

You have to create CSS sections with @media

You need to adjust the values in your #leftblock (and others) for them to fit what you need/want

ex:

@media screen and (min-width: 480px) and (max-width: 699px) {

   #leftBlock {      
   max-height: 350px;     
   }

}

You can actually play around with the diffenrent screen sizes, depending on your needs.

Using % instead of px is also a plan to make it more flexible.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download