I'm attempting to make a button located in the right rail column on my test page (in desktop view) expand to fill the entire footer of the page in mobile view.
Below is the CSS and JavaScript code I am currently using:
@media screen and (max-width: 768px) {
#register_text_container {
position: fixed;
bottom: 0px;
}
}
$(function() { //doc ready
if (!($.browser == "msie" && $.browser.version < 7)) {
var target = "#register_text_container", top = $(target).offset().top - parseFloat($(target).css("margin-top").replace(/auto/, 0));
$(window).scroll(function(event) {
if (top <= $(this).scrollTop()) {
$(target).addClass("fixed");
} else {
$(target).removeClass("fixed");
}
});
}
});
The JavaScript code belongs to someone else, sourced from stackoverflow, and it has been effective. However, I am struggling to make the button fill the entire page. I attempted using width: 100%, but that did not work.
The container referenced in my CSS code is inaccessible to me as it is part of the CMS and appears as a button.
Upon inspecting the Register button's HTML code to determine what to reference in my CSS file, I found the following:
<div class="entry-page-button-container" id="register_link_container">
<div class="manageable-content" data-container="edit_register_text_container">
<a class="entry-text-link secondary-step step-button" id="register_text_container" href="">Register</a>
</div>
</div>
I have tried targeting each class and ID without success in getting the register button to span the full width of the page.
Any assistance would be greatly appreciated.
Thank you!
Test Page