Help with CSS Columns

RapidWeaver Classic
1

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.

2

Do you have a link to a sample page of what the footer is on the other pages?

3

@teefers, I do. https://smarthomestennessee.com

4

@dropgates, How did you add the footer to the page? I didn’t see any extra content area.

5

In the html code section for that page.

10%20AM
10%20AM1654×880 98.1 KB

6

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;
}
1 Like
7

@teefers Thank you. I truly appreciate it.

8

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.

1 Like
9

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…

10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.