INTRODUCTION
RESPONSIVE BRANDING
Welcome to a tutorial on how to create a CSS responsive Logo. So you have just gotten an awesome logo for your website or company and eagerly put it up… Only to notice that it is way too big on a small smartphone screen. Just how do we “fix” this issue then? Read on to find out!
I have included a zip file with all the source code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
CONFESSION
AN HONEST DISCLOSURE
Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!
NAVIGATION
TABLE OF CONTENTS
Section A | Section B | Section C |
Extra | Closing |
SECTION A
THE BASICS
Before we go into the code, here is a small section that will explain a little bit more about the problem, and how we are going to deal with it.
THE DEMO LOGO
For the purpose of demonstration, we will be using this dummy Potatoes Rock logo. Yep, feel free to use this for your own testing as well. (Right click, save image as. Or just download the entire zip file at the bottom.)
THE PROBLEM & SOLUTION
The problem – You have a nice logo, and it looks good on big screens. But when it comes to the small screens, that giant logo simply gets cut off and don’t fit in nicely.
The solution – There are actually 2 ways to “fix” that big logo problem. The first is to simply turn that logo responsive, and that it automatically scales down on smaller screens. The other way is also responsive, but a little more interesting as we split the logo into 2 parts… We will go through more of that below.
SECTION B
SIMPLE SOLUTION
Now that you have an idea of what is going to happen, here is the first solution. That is to turn the logo responsive so that it scales to fit.
THE SCRIPT
Simple Responsive Logo Example
Lorem ipsum dolor Sit Amet, consectetur adipiscing elit. Curabitur volutpat sed orci vitae iaculis.
Ut pretium, nisl nec rhoncus fermentum, ipsum erat convallis massa, at faucibus diam nibh et augue.
Quisque eget libero rutrum, volutpat justo sit amet, consequat nulla. Phasellus ut laoreet ante.
Integer porttitor purus vel nulla aliquam, sit amet mattis ante varius.
THE EXPLANATION
Yep, all you have to do is add width: 100% and height: auto to the logo. CSS will do the rest of the magic to scale the logo. But of course, you might want to add a max-width to limit the width, or your logo will be scaled to fill the width of the full screen.
SECTION C
SPLIT LOGO
A problem with the above simple scaling method is that the logo text can sometimes appear too small on small screens. So here is an alternative solution to split the logo into 2 parts – The logo and the text. We show both the “logo and text” on big screens and only the logo on smaller screens.
THE SCRIPT
Split Responsive Logo Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur volutpat sed orci vitae iaculis.
Ut pretium, nisl nec rhoncus fermentum, ipsum erat convallis massa, at faucibus diam nibh et augue.
Quisque eget libero rutrum, volutpat justo sit amet, consequat nulla. Phasellus ut laoreet ante.
Integer porttitor purus vel nulla aliquam, sit amet mattis ante varius.
THE EXPLANATION
The logo is now split into two parts – The potato and the text.
- On big screens, we will be showing the both of them as a “full logo”.
- But magic happens on the smaller screens, we use the
@mediaquery to hide the text, and center the potato to make things look more like a proper mobile website.
THE DEMO
Go ahead, resize the window to see some potato action.
HOW TO SPLIT THE LOGO?
If you are not sure how to do it, simply ask your logo designer to split it for you. If you are into some simple DIY, there are many free applications that can do simple graphics manipulation – You can try out the free Paint.net.
EXTRA
DOWNLOAD & MORE
That’s all for the code, and here is the download link as promised.
SOURCE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
CLOSING
WHAT’S NEXT?
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you in your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
The post How to Create Simple Css Responsive Logo appeared first on Code Boxx.
