Center Footer Text in Mobile View

Your website footer is actually centered in mobile ??

How presposterous, I know, but please bear with me for a second.

Here’s your site’s footer view in mobile:

You’re using visibility: hidden to hide the part shown with red border, while the part shown with green border is entirely written in CSS (using CSS content property).

Now because the RED part is invisible, you suppose there’s nothing there, so when you center the GREEN part, it should cover the entire width. But visibility: hidden does not remove the item from the layout: it merely makes it invisible. So everything gets centered as you can see above.

You can use JavaScript to swap out the content of a div with another, but I’m not entirely sure if you can accomplish this in purely CSS and still be able to style the new content independently as you’re trying to.

Oh I see what’s happening! thank you so much George – I never would have figured out that was the issue lol. I not familiar with JavaScript so I’ll have to leave it as is or come up with some sort of alternative – thanks again!

• This reply was modified 5 years ago by rachel8t4.

I’m glad you found my answer useful.

But not being the kind of person to waste a perfectly good problem ?? , I took a closer look and discovered I can easily make it centred by adding display: block to your .site-info:before pseudo-class, like:

.site-info:before {
    display: block;
}

Here’s the result:

So it’s centered now.

But now you’ll also see there’s more VERTICAL space between the footer text and the social media icons! That’s because what’s really happening behind the scenes is that the RED part (screenshot from my first post) is now BELOW the GREEN part, as seen here when I remove the visibility:hidden property:

You can reduce this vertical spacing with a negative bottom margin still inside the .site-info:before pseudoclass, like:

.site-info:before {
    display: block;
    margin-bottom: -50px;
}

Which produces:

I hope that helps. Good luck, and godspeed with your project!

Oh you’re an absolute legend! Thanks so much, that worked perfectly ??