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?

 

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

 

 

 

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.

 

 

METHOD 1) AUTO-SCALING LOGO

<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

<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)

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

 

 

 

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

• Using media queries – CSS: Cascading Style Sheets | MDN

 

INFOGRAPHIC CHEAT SHEET