Site logo image responsive

[Sniper_E]

I created four site_logo images for the different resolution sizes. Desktop and Mobile.
566px by 64px - site_logo.png
480px by 54px - site_logo_med.png
320px by 36px - site_logo_small.png
280px by 32px - site_logo_tiny.png
These are simply my large site logo image, reducing the size for each smaller image.

First I replaced the codes in the overall_header.html to show my logo and description on hover.

Code: Select all

			<div id="site-description">
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
				<a id="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="{SITE_DESCRIPTION}">{SITE_LOGO_IMG}</a>
			</div>

Then I added the images in the stylesheet to show the different size logo images.

I listed the large site_logo image in the prosilver/theme/imageset.css

Code: Select all

.imageset.site_logo {
	background-image: url("./images/site_logo.png");
	padding-left: 566px;
	padding-top: 64px;
}

The search bar would run over the full size site_logo image at 800px by 768px resolution.
So I added a new line at the bottom of the prosilver/theme/imageset.css

Code: Select all

@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
	.imageset.site_logo {
		background-image: url("./images/site_logo_med.png");
		padding-left: 480px;
		padding-top: 54px;
	}
}

Now the med site_logo image loads in the smaller desktop resolution as needed.

When the responsive style kicks in at 700px the site_logo image drops so below the /* Logo block.
Sideways mobile view needs site_logo image in the prosilver/theme/responsive.css

Code: Select all

.imageset.site_logo {
	background-image: url("./images/site_logo_med.png");
	padding-left: 480px;
	padding-top: 54px;
}

Now when you turn your mobile device upright you need the small site_logo image.
In the prosilver/theme/responsive.css add it in the 500px section.

Code: Select all

@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
	.imageset.site_logo {
		background-image: url("./images/site_logo_small.png");
		padding-left: 320px;
		padding-top: 41px;
	}

And the smaller mobile views like the 320px view add the smallest under the 350px view.

Code: Select all

@media only screen and (max-width: 350px), only screen and (max-device-width: 350px) {
	.imageset.site_logo {
		background-image: url("./images/site_logo_tiny.png");
		padding-left: 280px;
		padding-top: 32px;
	}

The different size site_logo images will now load depending on your view. Desktop and Mobile.
You can check out the responsive sizes here ->

[Raul [ThE KuKa]]

Thanks Sniper_E

[ClickClickClick]

Thank you for the how to, Sniper_E!
Will definitely be doing this.

[PayBas]

I wouldn't add a completely new file for a single media query rule.

You could do this just as easily by adding media queries to the already existing responsive.css for lower resolutions.

[Sniper_E]

I wouldn't add a completely new file for a single media query rule.

You could do this just as easily by adding media queries to the already existing responsive.css for lower resolutions.

I'll look into that PayBas. Thank you for the better direction. I didn't know that could be done.

Please... No one should use my insane codes in this thread. Sniper Out!

[PayBas]

I didn't say your code was insane . I could just be a bit more efficient. Might as well give pointers where applicable.

[Sniper_E]

You are correct PayBas. Thanks for the pointer. First post updated.

I have it working fine on my mobile device.
When I turn my phone upright it loads the smaller site_logo image.
When I turn my phone back sideways I have to refresh my browser to reload those classes.
It will not automatically reload those classes like the desktop browsers do.

Other than that problem, all works well.

[lavachapi]

Looking with developer tool from Firefox I see that and that

[Khaos-Rage]

Looks fine to me at 360x640 on Firefox which is the lowest resolution that would possibly used by most people unless they have an really old feature phone.

Screenshot_16.png

[Sniper_E]

Yes, the image needed to be smaller for the 320px layout. I didn't check that.
My cell phone did not go that small, like Khaos-Rage. So I didn't see that problem.

Thank you lavachapi for pointing that out. My bad, fixed...
I must "View All Responsive Layouts" in the future.

[elgrandoc]

This has been endlessly useful. Thank you for this Sniper_E. Managed to get my forum logo working on the mobile platform. Excellent!

[Sniper_E]

Your welcome! Glad you got your site hooked up. This stuff is endless.
I'm using this feature in extension's stylesheets also to control their pages.
phpbb did great making this feature possible. Love the responsive style!

Thank you phpBB...

[proskier]

I tried to do this with my board (copying your instructions) but I only have 'large' and 'small' image. No image shows when resolution is below 700px. Can you take a look and see what is wrong? Thanks for any help.

www.KisnardOnline.com/forums

[Sniper_E]

Yes proskier that is the way the responsive works. The logo image drops.

When the responsive style kicks in at 700px the site_logo image drops.

Follow the instructions on the first post and yours will show.

I personally took the {SITENAME} out of my header. My logo is my site name, like yours.
Reduce the size of your site logo image and list it in the lower resolution sections.

[proskier]

Figured it out... the reason it wasn't working is because your instructions omit 1 step for responsive.css (switching .logo from none to inline-block):

Code: Select all

.logo {
   /* change display value to inline-block to show logo */
   display: inline-block;
   /* display: none; */
   float: none;
   padding: 10px;
}

Found the step here: http://www.mixingonbeat.com/phpbb/viewt ... 163&t=9110