Different Size Logo's on Different Platforms

profenceco · Member · Jan 16, 2017 at 1:56 pm
Copy link

Add topic to favorites
I looking for a way to use CSS to have different size logo’s in the header on each of the different platforms (web browser, tablet, and smartphone). Is there a way to make it so that each on is a customized size?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 17, 2017 at 4:49 am
Copy link
Hi @chrisosmer31, there are about 100 different screen sizes on mobile and tablet, so it would be difficult to get too detailed on this. Right now, the logo resizes as the window/screen gets narrower.
We can use Media Queries and bracket min and max widths that would cover the majority of tablets and phones and resize the existing logo you have. This is just some example CSS for that. The first is for tablets and the second for phones.
```
@media screen and (max-width: 900px) and (min-width: 601px) {
	.site-logo {
		max-width: 30%;
	}
}
@media screen and (max-width: 600px) {
	.site-logo {
		max-width: 20%;
	}
}
```
Additionally, if you are wanting completely different logos for tablets and phones, we can make the existing logo invisible and then insert a new logo using CSS. If you can explain a bit further what you are wanting, I’m more than happy to help with that.
profenceco · Member · Jan 17, 2017 at 12:41 pm
Copy link
Thank worked Perfect for what I was trying to do. Thanks!
thesacredpath · Member · Jan 17, 2017 at 10:06 pm
Copy link
Hooray and you are welcome!

No items found.