Site logo image responsive

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Scam Warning
TooTall1
Registered User
Posts: 3
Joined: Wed Dec 10, 2014 11:21 pm

Re: Site logo image responsive

Post by TooTall1 »

Hi all,

This was of a great help, so thank you!

I am encountering one issue... my logo's all load correctly at the correct resolutions... however, for some reason when viewing my site on my mobile, there now appears to be a white space margin down the right hand side of the page...
IMG_0268.PNG
IMG_0268.PNG (169.65 KiB) Viewed 2256 times
Could anyone perhaps shed some light on why this may be the case.

Many thanks in advance. :)
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Site logo image responsive

Post by Hanakin »

This I think is because scaling was not disabled in for mobile. But can not confirm this at the moment
beer man
Registered User
Posts: 31
Joined: Thu Dec 16, 2004 10:58 am
Location: Melbourne, Australia
Contact:

Re: Site logo image responsive

Post by beer man »

Hi all,

Thanks for this thread. It was very helpful.

I thought it'd be worthwhile summarising the code that this thread outlines given there was a late addition (without which the initial code doesn't work).

Below is what worked for me, using the dimensions of the images from the original post. Adjust them to the size of your logos.

The way I modify my CSS is to create an override.css file and load that last, which is why only the changed attributes are in the code below.

I hope it's useful for someone.

Cheers,

Oliver

Code: Select all

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

@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: 460px;
      padding-top: 49px;
   }
}

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

   .logo {
   display: inline-block !important;
}
   }
huddy
Registered User
Posts: 163
Joined: Fri Feb 21, 2014 12:21 pm
Location: Chelmsford UK
Contact:

Re: Site logo image responsive

Post by huddy »

Hi,

I wonder if some could please help me.

I followed the instructions above.. The overides seems like the best way forward on this.

Works nd looks fine on desktop.. as the screen shrinks, it selects the correct logo/banner until it disappears.

but on the mobile device it look rubbish..

The screen size is selecting the smaller banner but it look all huddles up in the corner and out of place.

http://www.huddysworld.co.uk/mlgtestforum/index.php

i really don't like the responsive forum.. I'd prefer to have the web version available regardless and let the user use navigation or zoom in out out but hey.. things change.. I'm really at a loss here because I need this to look decent on mobile devices before i can upgrade our live forum to 3.1.x


Many thanks
huddy
Registered User
Posts: 163
Joined: Fri Feb 21, 2014 12:21 pm
Location: Chelmsford UK
Contact:

Re: Site logo image responsive

Post by huddy »

I managed to turn off responsive css.
Max-alone
Registered User
Posts: 16
Joined: Fri Apr 03, 2015 11:00 am
Contact:

Re: Site logo image responsive

Post by Max-alone »

Thanks a lot Sniper_E ;)
User avatar
Sniper_E
Registered User
Posts: 1134
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: Site logo image responsive

Post by Sniper_E »

You're welcome Max-alone! ;) and everyone...

I'm actually using four different size logo images now.
lavachapi reported that the very small 320px view on smaller mobile devices did not fit.

So I added even a smaller image for it... and I posted my header edits also. First post updated.
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
User avatar
Sniper_E
Registered User
Posts: 1134
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: Site logo image responsive

Post by Sniper_E »

TooTall1 wrote:I am encountering one issue... my logo's all load correctly at the correct resolutions... however, for some reason when viewing my site on my mobile, there now appears to be a white space margin down the right hand side of the page...
The white space down the right side of your view is probably the width of your image.
Get rid of all the transparent wasted space around your image on that smaller sized logo.
Sorry, did you figure all this out already?
proskier wrote: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;
}
I did not have to use that with the header modifications I use, now posted on the first post.
But it is good info for others. Beer Man used the same method.
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
User avatar
Laarela
Registered User
Posts: 3
Joined: Fri Mar 03, 2017 5:27 pm
Location: Germany

Re: Site logo image responsive

Post by Laarela »

Thank you so much, Sniper_E! This worked like a charm on my version 3.1.10 board! :)

However, I am planning to update my board to version 3.2 very soon and there is no imageset.css anymore. :(
Is there any way to make your method work on a 3.2-board?

Any help would be greatly appreciated! :)
User avatar
proskier
Registered User
Posts: 34
Joined: Tue Dec 31, 2013 4:41 am
Location: United States
Name: Jay Avondoglio

Re: Site logo image responsive

Post by proskier »

Laarela wrote: Sat Mar 04, 2017 8:14 pm However, I am planning to update my board to version 3.2 very soon and there is no imageset.css anymore. :(
Is there any way to make your method work on a 3.2-board?

Any help would be greatly appreciated! :)
viewtopic.php?f=556&t=2400421
Image
DEV Proskier
Locked

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