A Simple Responsive, Two Line Footer

I was designing a website the other day and realised the text in the footer for my website looked better on two lines, at a certain mobile breakpoint. Whereas on desktop, it looked better all on one line. I typed out a few lines in codepen to try it out and thought I’d add it here so that it can be shared and reused.

All CSS, JavaScript and HTML was written ‘obtrusively’. This is because I needed to add it to a custom HTML section within a WordPress theme, for speed more than anything else. As it was such a small piece of code it hardly seemed necessary to split it out, unless of course, you are going down that route.

This is the text:
© 2019 All rights reserved. Web designed in Whitstable by DJW

I added the year as JavaScript so that it updates automatically (php wouldn’t work due to the custom HTML theme section).

The sentences are actually paragraphs <p> – by default they are displayed as blocks, thus on two separate lines. This means it is ‘mobile-first’.

The query is for larger screens, 600px and over (feel free to change to size to suit). When the screen is this size, the query makes the second sentence (with a class) display: inline and therefore moves it onto the first line.

Note that the first sentence has an inline style of display: inline. for some reason I got funny styling without including this.

Here’s the code to grab:

<style scoped>@media (min-width:600px){.TwoLineMob{display: inline;}}</style>
<div class="footerCustomTheme">
<p style="display:inline">© <script> document.write(new Date().getFullYear()); </script> All rights reserved.</p>
<p class="TwoLineMob">Web designed in Whitstable by <a title="Whitstable Web and Graphic solutions for startups and sme's" href="https://danjohnsonwhitstable.com/" >DJW</a></p></div>

You can view the code in codepen here: