I’m not a responsive design expert. Or even close. But I did recently figure out how to replace a full logo with a smaller square icon on a web site so when it’s viewed on a phone the header is more compact. Here’s how I did it so I can find it again, and to help others, and so smarter people can come by and tell me better ways to do it.
The HTML
The CSS
#icon { display: none; }
#logo { display: block; }
/* Hide/rearrange for smaller screens */ @media screen and (max-width: 600px) { #icon { display: block; align-content:center; }
#logo { display: none; } }
Basically when the screen shrinks below 600px, the two images swap between display:block and display:none. Seems to work fine everywhere I’ve tested it. Hope it helps some others.