COMMUNITY FORUM

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?

Start
Prev
1
Next
End

Devin Burghart
Topic Author
Offline
New Member

10 years 4 months ago #138952 by Devin Burghart

Different logo for small viewports? was created by Devin Burghart

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.

Krikor Boghossian
Offline
Platinum Member

10 years 4 months ago #138953 by Krikor Boghossian

Replied by Krikor Boghossian on 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;

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

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

Start
Prev
1
Next
End