3 Ways to Create A Simple Responsive Logo In CSS

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?

An easy way to create a responsive logo is to set 100% width, auto height, and a max-width on the logo image – <img src="LOGO.PNG" style="width:100%; height:auto; max-width:300px;"/>

 

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.

 

TABLE OF CONTENTS

Download & Notes Responsive Logo Useful Bits & Links
The End

 

 

DOWNLOAD & NOTES

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

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short 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.

 

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.

 

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 {
  /* (A) RESPONSIVE LOGO */
  width: 100%;
  height: auto;
 
  /* (B) RECOMMENDED - LIMIT MAXIMUM WIDTH */
  max-width: 400px;
}
</style>
 
<!-- (C) PAGE LOGO -->
<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>
/* (A) APPLY ONLY ON SMALL SCREENS */
@media only screen and (max-width: 600px) {
  /* (A1) CENTER LOGO */
  #page-header { text-align: center; }
 
  /* (A2) BREAK LOGO & TEXT INTO 2 ROWS */
  img.logoA, img.logoB {
    display: block; 
    margin: 0 auto; 
  }
  img.logoB { max-width: 200px; } /* OPTIONAL */
}
</style>
 
<!-- (B) PAGE LOGO -->
<header id="page-header">
  <!-- (B1) LOGO -->
  <img src="potato-a.jpg" class="logoA"/>
 
  <!-- (B2) TEXT -->
  <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>
/* (A) APPLY ONLY ON SMALL SCREENS */
@media only screen and (max-width: 600px) {
  /* (A1) CENTER LOGO */
  #page-header { text-align: center; }
 
  /* (A2) SHOW LOGO */
  img.logoA {
    display: block; 
    margin: 0 auto; 
  }
 
  /* (A3) HIDE TEXT */
  img.logoB { display: none; }
}
</style>
 
<!-- (B) PAGE LOGO -->
<header id="page-header">
  <!-- (B1) LOGO -->
  <img src="potato-a.jpg" class="logoA"/>
 
  <!-- (B2) TEXT -->
  <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.

 

 

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 CHEAT SHEET

Responsive CSS Logo (Click To Enlarge)

 

THE END

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!

1 thought on “3 Ways to Create A Simple Responsive Logo In CSS”

Leave a Comment

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