I need a little (or quite possibly a lot) of help with some CSS. I’m using Nick Cates Writer Theme for a blog and would like to create a “footer” to match the rest of the website (built in Foundation).
My test page is here.
What I would like is the center image centered vertically in the footer, and the Terms and Conditions line to line up with Lebanon, TX line.
I tried following Net Ninja’s tutorial, but had no luck. I’m happy to pay someone for the time to write the code, please DM me.
Do you have a link to a sample page of what the footer is on the other pages?
@dropgates, How did you add the footer to the page? I didn’t see any extra content area.
Okay,
You could try something like this, I changed the code in the body section:
<div class="footer">
<div class="left">
<p><b>Contact:</b>
<br>
P: (615) 547-9222<br>
E: info@smarthomestennessee.com<br>
<br>
<b>Address:</b>
<br>
910 Buck Run Court<br>
Lebanon, TN 37087</p>
</div>
<img src="https://smarthomestennessee.com/files/small_p333_n45.png" alt="best of home guide award"
height="100" width="100">
<div class="right">© 2019 Smart Home Protection Systems, Inc.<br>
Licenses - TN C-1332, KY 0823471
<br>Terms and Conditions</div><br>
</div>
And then replace the CSS you added with this:
.footer {
display: flex;
padding: 20px;
justify-content: space-around;
flex-wrap: wrap;
background-color: rgb(14, 55, 109);
color: white;
}
.right {
font-size: 8pt;
line-height: 160%;
text-align: right;
}
@teefers Thank you. I truly appreciate it.
Hope it works for you. You can mess with the padding and color. You could also try changing the justify-content to space-evenly or space-between.
I added <br> just before the image and it shifted it over more center on the page. And I added the same image to simulate icons for now and changed the banner in the theme. I’m pretty sure the client is going to approve this.
Thank you again…