Footer information alignment

Sparkling
1

Hi Movin,

I modified the footer with some inline css to include a phone number and email. However with the global settings for the footer being align left, how do I set the copyright to align right?

Thanks!
Mark

2

Change your code from:

<p style="align:right; color:#999; font-size:12px; line-height:14px">©2016 Lucy Junus Interior Design. All rights reserved.</p>

To this:

<p style="text-align:right; color:#999; font-size:12px; line-height:14px">©2016 Lucy Junus Interior Design. All rights reserved.</p>

If that doesn’t work, use this:

<p style="text-align:right !important; color:#999; font-size:12px; line-height:14px">©2016 Lucy Junus Interior Design. All rights reserved.</p>

3

Hi Krisbab! Thanks so much! The first one worked. Is there a way to align the copyright info top with the phone number? I realize that this will be more complicated. Sorry, I’m a WP newbie and am cutting/pasting code.

Thanks!

4

Try changing your code from:

<p style="align:left; color:#999; font-size:12px; line-height:20px">415-800-8876<br>
<a href="mailto:[email protected]" target="_top">[email protected]</a></p>

To this:

<p style="text-align:right; color:#999; font-size:12px; line-height:20px">415-800-8876<br>
<a href="mailto:[email protected]" target="_top">[email protected]</a></p>

You could try to keep as one paragraph, try changing your code from:

<p style="align:left; color:#999; font-size:12px; line-height:20px">415-800-8876<br>
<a href="mailto:[email protected]" target="_top">[email protected]</a></p><p style="text-align:right; color:#999; font-size:12px; line-height:14px">©2016 Lucy Junus Interior Design. All rights reserved.</p>

To this:

<p style="text-align:right; color:#999; font-size:12px; line-height:20px">415-800-8876<br>
<a href="mailto:[email protected]" target="_top">[email protected]</a><br>©2016 Lucy Junus Interior Design. All rights reserved</p>

I removed the “.” after reserved

Hope this helps (I’m still learning).

5

Thanks for all your help! I figured out how to do it another way.

CSS:
.container.footer {
position:relative;
width: 800px;
height: 200px;
}
.inlineLeft, .inlineRight {
position:absolute;
display: inline;
}
.inlineRight {
right: 0;
}

html:
<div class=“container.footer”>
<div class=“inlineLeft”>415-800-8876</div>
<div class=“inlineRight”>©2016 Lucy Junus Interior Design. All rights reserved.</div>
</div>
<p style=“align:left; color:#999; font-size:12px; line-height:20px”></br>
[email protected]</p>

6

Hi @01labs,

Awesome great to see you got that figured out.

Please advise if you have more questions.

Have a fantastic day!

Cheers,
Movin

7

Hi Movin,

So, regarding my issue with inserting information in the footer, it works great in desktop mode, but when it reduces to mobile mode, the info overlaps. Is there somewhere in the css that I can set for mobile?

See attached image from my iPhone.

8

You can try resolving this issue by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

@media screen and (max-width: 385px) {
.copyright .inlineLeft {
    position: static;
    display: block;
    clear: both;
}
.copyright .inlineRight {
    right: auto;
    bottom: -20px;
    left: 15px;
}
.copyright > p {
    margin-top: -15px;
    margin-bottom: 20px;
}
}
9

Thanks Movin! Works great!

10

You are most welcome here :slight_smile: