I'm currently working on a responsive landing page for a company and running into an issue with the CTA button's position outside of Chrome. It's functioning perfectly in Chrome, resizing as intended:
Here is the CSS responsible for this:
#page1Container {
max-height: 700px;
min-height: 700px;
}
#page1Background {
background: #c5c5c5 url(../../../media/bg.jpg) no-repeat;
background-position: 50% 50%;
background-size: cover;
width: 100%;
height: 100%;
padding-bottom: 23.5%;
}
#page1Container .page1CTA {
width: 1400px;
height: 100%;
margin: auto;
}
#page1Container .page1CTA #page1CTApos {
position: relative;
top: 26%;
}
Accompanied by the following DIV structure:
<div id="page1Container">
<div id="page1Background">
<div id="adjustMe" class="page1CTA">
<div id="page1CTApos">
<h1><?php echo $config['homeHead1']; ?></h1>
<h2><?php echo $config['homeHead2']; ?></h2>
<div class="page1Button"><a href="get-started.php">Start Your Free Month</a></div>
</div>
</div>
</div>
</div>
While Chrome is displaying what I want correctly, Firefox and IE are not cooperating. Any suggestions on what might be missing here? Keep in mind the responsiveness of the background.