How to create mobile responsive logos

[Sniper_E]

Where did you find those lines? I opened "overall_header.html" in Prosilver and Prosilver_se, and several other Style & Theme & Template folders, but didn't see any reference to "BothAndBlog".

I went to that site of yours and right clicked on the page and selected View Page Source.

Code: Select all

		<div class="headerbar" role="banner">
					<div class="inner">

			<div id="site-description" class="site-description">
				<a id="logo" class="logo" href="http://www.bothandblog.enformationism.info" title="Home"><span class="site_logo"></span></a>
				<h1>BothAndBlog Forum</h1>
				<p></p>
				<p class="skiplink"><a href="#start_here">Skip to content</a></p>
			</div>

									
			</div>
					</div>

This above code is what I see in your header.

But you have some weird stuff going on in that site. I can not locate your site_logo image. At resolution 930px your image will not reduce in size and hides part of it. It should reduce in size if you have max-width: 100%; which David's ext gives you. That height could be coming from any of those classes or that id also. I can not see where your problem is coming from so I would suggest you start over with a fresh install of phpBB and David's extension and go from there. That may get rid of whatever you have in there causing that problem. I can not find that css showing anywhere so I can not help you with those extra codes you have in there.

[jhearcht]

But you have some weird stuff going on in that site. I can not locate your site_logo image. At resolution 930px your image will not reduce in size and hides part of it. It should reduce in size if you have max-width: 100%; which David's ext gives you. That height could be coming from any of those classes or that id also. I can not see where your problem is coming from so I would suggest you start over with a fresh install of phpBB and David's extension and go from there. That may get rid of whatever you have in there causing that problem. I can not find that css showing anywhere so I can not help you with those extra codes you have in there.

The only thing I added to the original "Prosilver" theme was 1> the PC size logo image, 2> the Prosilver_se" theme, and 3> the " david63's SiteLogo3.2" extension. I haven't done any coding. The "responsive" logo re-size was included in "SiteLogo". All of this looks good on my PC, and on phone screens, except for out-of-proportion whitespace following the logo.

I'm assuming that the extra whitespace below the logo was a result of the "responsive" coding in the extension. Any "weird stuff" is not my doing, and I don't know how to fix it. Hence this topic. But the discussion above seems to have strayed into extraneous matters that confuse the simple issue : how to automatically (responsively) reduce the allocated logo space to fit small screens, while maintaining appropriate spacing between objects?

Anyway, what could I do differently in a clean install, other than eliminate the "Prosilver_se" color scheme? Or to just forget the idea of having a custom logo/banner?

[Sniper_E]

You're right we've gone off track. It is hard to read your files or see where that problem is coming from.
That site I'm looking at is in one location and I just found out that image is from somewhere else.

If I had time I could do your styling for you but I have other projects I'm working on.
I started fooling with it on my test site but I don't have time for that. Good luck.

Edit: I fooled around with it a little. The image as a background was giving me that same trouble.
So I put your image in as an image in the header instead of as a background image.
I changed the <div id="page-header"> section to make it an image.

styles/prosilver_se/template/overall_header.html

Code: Select all

	<div id="page-header">
		<div class="headerbar" role="banner">
		<!-- EVENT overall_header_headerbar_before -->
			<div class="inner">
				<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><img src="http://gnomon.enformationism.info/Images/Forum Logo 4_830x224_09-20_2017.png" alt="" /></a>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>
			<!-- EVENT overall_header_headerbar_after -->
		</div>
		<!-- EVENT overall_header_navbar_before -->
		<!-- INCLUDE navbar_header.html -->
	</div>

Then I adjusted David's site_logo_common.css a little.

Code: Select all

/**
* site_logo_common.css
**/

#logo img {
    display: block;
    margin: 0 auto 10px;
    max-width: 100%;
}

#logo {
    display: block !important;
    box-sizing: border-box;
}

.headerbar{
	width: auto;
	background-size: contain;
	background-color: transparent;
}

.sl-headerbar {
	margin: 0 auto;
	padding: 5px;
	border-radius: 7px;
	position: relative;
	display: block;
	max-width: 100%;
}

#sl-new-desc {
	clear: left;
	background-color:transparent !important;
}

#sl-new-desc h1 {
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
}

#sl-new-desc p {
	line-height: 1.3em;
	font-size: 1.1em;
	margin-bottom: 1.5em;
}

You can check the results out on my test site. http://www.sniper-e.com/ and switch to prosilver_se style.
It could still use some fine adjustments to get it looking exactly like you want it to.