change section height responsive design - css

Question

My webpage uses multiple sections. I have the .header section set to 1050px which is perfect for desktop viewing, but when viewed on a mobile device the elements inside overflow into the next section.
How can I seamlessly change the section height for mobile viewing so the elements don' overflow?
Other ideas are welcome as well.
Here is my CSS for the section:
.header-14-sub {
color: #bdc3c7;
background-color: #1c201d;
position: relative;
padding-top: 95px;
padding-bottom: 95px;
height: 1200px;
}

Answer 1

Here's one option for you: http://codepen.io/panchroma/pen/BulnL
I'm using media queries to set different CSS values as the viewport of window width changes. The css is easy to follow and for this to work reliably, you need to include a meta tag similar to the following in the head of your document.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I've used min-height instead of heght to control the div sizes, because it's more flexible, for example it will probably give better results if a user has a large font setting.
The break points I've chosen for the media queries viewport widths are for illustration only, customise these to fit the specifics of your design.
Good luck!
CSS
.header-14-sub {
color: #bdc3c7;
background-color: #1c201d;
position: relative;
padding-top: 95px;
padding-bottom: 95px;
min-height: 900px; /* set default height */
transition: all 0.5s ease; /* optional css transition effect */
}
/* For media queries to work on smartphones, be sure to add a meta tag similar to the following
<meta name="viewport" content="width=device-width, initial-scale=1.0">
*/
#media (max-width: 480px) {
.header-14-sub {min-height: 300px;}
}
#media (min-width: 481px) and (max-width: 767px) {
.header-14-sub {min-height: 500px;}
}
#media (min-width: 768px) and (max-width: 979px) {
.header-14-sub { min-height: 700px;}
}
#media (min-width: 1200px) {
.header-14-sub {min-height: 1200px;}
}