3 Ways to Create A Simple Responsive Logo In CSS

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?

Well, an easy way to create a responsive logo is to set 100% width, auto height, and a limited max width – <img src=”LOGO.jpg” style=”width:100%; max-width:320px; height:auto”/>. It’s that simple. But if you need more examples, read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

 

SECTION A

DOWNLOAD & NOTES

First, here is the download link to the example code as promised.

 

EXAMPLE 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.

 

QUICK NOTES

There is nothing to install, so just download and unzip into a folder. If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

SECTION B

RESPONSIVE LOGO

All right, let us now go into some ways and ideas on how to create a responsive logo in this section.

 

METHOD 1) AUTO-SCALING LOGO

1-auto-scale.html
<style>
img.logo {
  width: 100%;
  height: auto;
  /* Recommended - Limit maximum width */
  max-width: 400px;
}
</style>
 
<header id="page-header">
  <img src="potato-logo.jpg" class="logo"/>
</header>

Yep, as in the introduction above, this is probably the easiest way to create a responsive logo (and any responsive image).

  • width: 100%; height: auto; will automatically scale the logo while maintaining the aspect ratio.
  • max-width: 400px is used to limit how big the logo can stretch up to.

 

 

METHOD 2) SPLIT LOGO

2-split.html
<style>
@media only screen and (max-width: 600px) {
  #page-header { text-align: center; }
  img.logoA, img.logoB {
    display: block; 
    margin: 0 auto; 
  }
  img.logoB { max-width: 200px; } /* OPTIONAL */
}
</style>
 
<header id="page-header">
  <img src="potato-a.jpg" class="logoA"/>
  <img src="potato-b.jpg" class="logoB"/>
</header>

This is a slightly more “advanced” method, where we split the graphic logo and the text into 2 different images. On big screens, the logo will display “as usual”. But on the smaller screens, we use @media to split the graphic and text into 2 different rows, center it on the screen.

 

METHOD 3) SPLIT LOGO (ALTERNATIVE)

3-split.html
<style>
@media only screen and (max-width: 600px) {
  #page-header { text-align: center; }
  img.logoA {
    display: block; 
    margin: 0 auto; 
  }
  img.logoB { display: none; }
}
</style>
 
<header id="page-header">
  <img src="potato-a.jpg" class="logoA"/>
  <img src="potato-b.jpg" class="logoB"/>
</header>

This is an alternative version of the above “split logo”. Pretty much the same graphic and text strategy, except that we lose the text on small screens to make things look more streamlined.

 

 

EXTRA

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

HOW TO SPLIT THE LOGO?

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 for Windows or GIMP for Windows/Mac/Linux… There are many apps on Android/IOS too. But If you are really not sure how to do it, simply ask a logo designer to split it for you.

 

LINKS & REFERENCES

 

 

INFOGRAPHIC

Responsive CSS Logo (Click To Enlarge)

 

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 with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *