Keyword
Please note that official support for commercial extensions & templates is provided in the Subscriber Help Desk.
Support requests should ONLY be directed there and require an active subscription plan.
This forum board is to be used for archive purposes and knowledge exchange ONLY.

Different logo for small viewports?

  • Devin Burghart
  • Devin Burghart's Avatar Topic Author
  • Offline
  • New Member
More
4 years 9 months ago #138952 by Devin Burghart
Devin Burghart created the topic: Different logo for small viewports?
Hi,

I was wondering if there is an easy way to display a different logo image when the site is displayed on a smaller viewport? Our logo gets too small to read currently, so we were hoping to use a different version (one with just IREHR in blocks) to display on smaller viewports like the iphone. It's the only issue that people have mentioned about the new site, otherwise people keep giving us great compliments thanks to the template you've designed.

Thanks again!

Please Log in or Create an account to join the conversation.

More
4 years 9 months ago #138953 by Krikor Boghossian
Krikor Boghossian replied the topic: Different logo for small viewports?
Thanks Devin :)

Sure there is.
@media screen and (max-width: 600px) {
	h1.logo img {
		width: 182px;
		height: 42px;
		padding-left: 182px; 
		background: url(../images/logo_182x42.png) 0 0 no-repeat; 
		overflow: hidden; }
}

Use this snippet as a base. As you see is for a 182 x 42 logo.
You need to update these values to represent the dimensions of your logo, eg:
width: 123px; height: 34px;  padding-left: 123px;
.

If you need to re-position your logo you can use position: relative; top: xx px; or margin-top: xx px;

IMPORTANT: Please search the forum before posting a question!

JoomlaWorks Support Team Member

---
JoomlaWorks
www.joomlaworks.net/

Please Log in or Create an account to join the conversation.


Powered by Kunena Forum