@blacklionwebsites, you have two elements which are keeping your page from responding properly to mobile screen widths. You can see the first if you make your desktop browser window the same width as a cell phone and scroll down to the bottom. You’ll see that the phone number and the “Website by…” line are way off to the right. That’s because the positions of those elements are set using the left property:
<span style="position:relative; left:375px;">720.334.7124</span>
<span style="position:relative; left:625px;">Website by <a href="" target="_blank">Black Lion Websites</a></span>
The left properties keep the web page from shrinking down when the viewport is narrowed.
First, you want to avoid using inline styles, because it makes it very difficult to modify using CSS. Second, you should probably change those elements to <div> instead of <span> and float them to the right by assigning a class or ID to them. That way they will respond properly to changes in viewport widths. Change the spans to these divs:
<div id="footer-phone">720.334.7124</div>
<div id="footer-by">Website by <a href="" target="_blank">Black Lion Websites</a></div>
Then, in your child theme’s style.css, add this rule:
#footer-phone,
#footer-by {
display: inline-block;
float: right;
}
Those elements should now respond properly as you adjust the width of your browser window.
As a final note, you don’t need to copy the entire contents of the parent theme’s style.css into your child theme’s style.css file. The parent theme’s style.css file is already being included, so by making an additional copy in your child theme, you are having the browser load it twice, which increases load time. You only need to include the CSS which you are changing, and any new CSS.
