site logo display in a smartphone

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
User avatar
John connor
Registered User
Posts: 2186
Joined: Fri Nov 14, 2014 5:14 pm
Location: U S Of A
Name: Aaron
Contact:

site logo display in a smartphone

Post by John connor » Tue Aug 13, 2019 6:02 pm

Why doesn't the site log display in a smartphone? Avatars do and they are resized. Can the site logo code or something be made to show up in a smartphone? If so, how?

User avatar
Mick
Support Team Member
Support Team Member
Posts: 21333
Joined: Fri Aug 29, 2008 9:49 am
Location: Watching cricket - definitely

Re: site logo display in a smartphone

Post by Mick » Tue Aug 13, 2019 8:22 pm

If I remember correctly that’s by design. Whether or not that can be changed I don’t know but maybe it’s a question for styles?
"The more connected we get the more alone we become" - Kyle Broflovski

User avatar
EA117
Registered User
Posts: 755
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: site logo display in a smartphone

Post by EA117 » Tue Aug 13, 2019 9:14 pm

Its intentional, by choice of the style design, and in response to the width of the screen. Styles like prosilver and Win10 have .logo { display: none } inside a @media (max-width: 700px) block in responsive.css. (There is a comment right above the display: none that reads, "/* change display value to inline-block to show logo */".)

If you simply changed that "display: none" property to "display: inline-block" as advertised (without changing anything else), the display would look like:

cyber.png

You could of course do even more to customize or shrink that. It's not entirely straight-forward like "just specify a new height and width", because site_logo is actually a background image, and not a "normal image". So manipulating the logo image size is achieved by controlling how the background of <span class="site_logo"> will be rendered.

If you replace the existing block in responsive.css, such that instead of the default:

Code: Select all

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

Code: Select all

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

	span.site_logo {
		height: 50px !important;
		width: 50px !important;
		background-size: contain;
		background-repeat: no-repeat;
	}	
then you will get a display more like this:

cyber.50.png

Effectively what was done there was "whenever the screen size is less than 700px" (because we're still inside of the @media (max-width: 700px) block), don't prevent the logo from displaying. But change the logo span's size to be only 50px by 50px instead of 100px by 100px, and change the background image handling so it's "scale to fit" rather than "clip" if the image is larger than the background it needs to fill. Also, now that logo isn't being hidden, remove the margins normally used in full size display, to reduce the space consumed in smaller displays. Finally, don't center the logo like we do other header elements when the screen is small.

User avatar
John connor
Registered User
Posts: 2186
Joined: Fri Nov 14, 2014 5:14 pm
Location: U S Of A
Name: Aaron
Contact:

Re: site logo display in a smartphone

Post by John connor » Wed Aug 14, 2019 2:31 am

Thanks for the code examples and input. I'll see if I can't change this. Many thanks. :)

User avatar
John connor
Registered User
Posts: 2186
Joined: Fri Nov 14, 2014 5:14 pm
Location: U S Of A
Name: Aaron
Contact:

Re: site logo display in a smartphone

Post by John connor » Wed Aug 14, 2019 5:37 am

And done. Thank you very much. Wish I knew code.

Post Reply

Return to “[3.2.x] Styles Support & Discussion”