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:

How to use content aware tool in Photoshop

The Content aware tool in Photoshop is awesome! It removes unwanted objects by being ‘aware of the surrounding content’ and filling in the space so that the object is removed and the ‘background’ appears normal. The great thing about this is that it doesn’t matter if it doesn’t go right first time. Just keep on selecting and removing objects until it looks great.

This is a super quick guide to using it. First have the pic ready in Photoshop (CS 5.5 and newer versions).

  1.  Duplicate the pic (alt + drag the pic icon in the layers panel), therefore the pic can be reused if it all goes wong.
  2. Use the lasso tool to select an area around the object you want to remove. (I prefer the standard lasso so that you can ‘draw’ the selection). The selection only has to be roughly around the edges of the object – obviously some of the background will be included in the selection but that’s ok. Make sure the selection does not touch the object.
  3. Go to edit – fill – content-aware, ok. (or shift + F5). Voila! The object is filled in by using background information to fill the selected area.
  4. Grin smugly.

London to Brighton Bike Ride 2018

When: Sunday 17th June 2018
Distance: 54 miles
Time: 6hrs 10 mins
Hills: plenty, including one ginormous one
Donated: £215

Tl:dr – I did a bike ride. 54 miles. One very big steep hill at the end. Got a medal and a sore backside. Oh and a film was made.

Continue reading

Posted in Me

So I decided to cut off my hair for charity

Hey all,

The deed is done!

On the 10th December 2016 I had my hair cut for charity:

After years of procrastination and persuasion, I finally decided to cut my hair off for charity!

I last went to the barbers when I was fifteen (so about 10 years ago then!) and it feels a bit bizarre but I’m so pleased with the way it turned out.

Continue reading

Posted in Me

Happy Cat / Grumpy Cat Christmas card 2016

Merry Christmas everyone, hope you like my Christmas card:

Happy Cat / Grumpy Cat Christmas Card 2016

Happy Cat / Grumpy Cat Christmas Card 2016

Entitled Happy Cat / Grumpy Cat. For those that received my card you got a choice. One side shows Happy Cat with the slogan “i can haz presents?” whilst turning the card around shows Grumpy Cat with a ‘paw’ written slogan of “BAH HUMBUG!”.

Continue reading

Christmas tree card 2015

Hey, hope you like my sparkly Christmas tree card.

The idea for the design all started when I was struggling to find inspiration for my Christmas card design. For the past set of years I’ve always designed my own Christmas card and this year I couldn’t think of what to do until I saw this website advent of code which was from an email by webdesignernews. I just thought the simple tree with animation flashes looked great. I’d used ASCII art before but only in the HTML source code for an old website just for a bit of fun but that was a few years go.

Continue reading

Kent Cycling Festival Charity Bike Ride 2015

It’s that time of year again where I do my bit for the greater good of the world and go out and cycle for miles and miles in the pouring rain in order to raise some cash for a good cause. So here I am at the Kent cycling festival charity bike ride 2015.

Yes, this year, the British Heart Foundation’s Kentish bike ride is now called the ‘Kent Cycling Festival charity bike ride’. It now has both off-road and on-road routes and is now in September.

So I thought I’d do the longest one (The long red line on map below). It’s 66 miles. The longest I’ve even ridden.

Continue reading

Posted in Me

Running in Whitstable 2014

I’ve decided to run!

The thought had been brewing for a while but it wasn’t until I found myself watching the London Marathon sitting on the sofa with a coupla yummy all butter croissants with cheese and ham that I realised that this is what I needed to do. we it took a few months to, erm, buy trainers and shorts but I’ve finally ‘GOT OUT OF THE FRONT DOOR’ and I’m very ecstatic about it. The first thing you notice is the amount of other people doing the same thing.

Continue reading