Skip to main content ↑ ↓
Topic: forum logo in mobile view (Read 6574 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

forum logo in mobile view

The forum logo only is getting smaller depending on the screen size. So on mobile devices some logos don't make sense. Logos with texts for example cannot be read anymore. So I want to use a different logo for mobile devices. Is there a way?

Re: forum logo in mobile view

Reply #1 –

Is the image a background-image in css or just a html tag? If it's in css then a simple @media query could be done based on the width.

Re: forum logo in mobile view

Reply #2 –

It's the standard ElkArte thingy, there's a reference to the image in the admin panel (actual theme settings).

Re: forum logo in mobile view

Reply #3 –

Something like:
Code: [Select]
#logobox, .rightheader #logobox {
    background-image: url(http://www.elkarte.net/community/themes/default/images/_besocial/logo_elk.png);
    background-repeat: no-repeat;
}
#logo {
    visibility: hidden;
}
positioned in the "@media screen and (max-width: {size you want}" section of the css file should do the trick.
Bugs creator.
Features destroyer.
Template killer.

Re: forum logo in mobile view

Reply #4 –

Yep, it did. But again it's not centered[1].
1 If anyone uses the word "center" today again I'm sure I will explode!↵

Re: forum logo in mobile view

Reply #6 –

With the default index.template.php the logo is still not centered.  O:-)

Re: forum logo in mobile view

Reply #7 –

Code: [Select]
#logobox, .rightheader #logobox {
    max-width: none;
}
Bugs creator.
Features destroyer.
Template killer.

Re: forum logo in mobile view

Reply #8 –

Me and my logo, we are not getting friends! With this code it is much more on the left!  :-X

Re: forum logo in mobile view

Reply #9 –

Code: [Select]
#logobox, .rightheader #logobox
    padding: 0;
}
Bugs creator.
Features destroyer.
Template killer.

Re: forum logo in mobile view

Reply #10 –

lol Okay, thanks to you and Ruth, she send me a message with a code to try... But we have come to an end here, please!  :D

I know have this in my custom CSS:

Code: [Select]
.centerheader #logobox, .centerheader #logo, .centerheader #siteslogan, #top_section_notice .button_submit {
    box-sizing: initial;
}

.centerheader #logobox {
    max-width: 100%;
    width: inherit;
}

@media screen and (max-width: 33.750em) {
	#logobox, .rightheader #logobox {
		background-image: url(http://forum-alternative-antriebe.de/themes/bluesky/images/forumlogo_mobile.png);
		background-repeat: no-repeat;
	}
	#logo {
		visibility: hidden;
	}
	.centerheader #logobox, .centerheader #logo, .centerheader #siteslogan, #top_section_notice .button_submit {
    	box-sizing: initial;
	}

	.centerheader #logobox {
    	max-width: 100%;
    	width: inherit;
	}
}

@media screen and (max-width: 30em) {
	#logobox, .rightheader #logobox {
		background-image: url(http://forum-alternative-antriebe.de/themes/bluesky/images/forumlogo_mobile.png);
		background-repeat: no-repeat;
	}
	#logo {
		visibility: hidden;
	}
	.centerheader #logobox, .centerheader #logo, .centerheader #siteslogan, #top_section_notice .button_submit {
    	box-sizing: initial;
	}

	.centerheader #logobox {
   	 max-width: 100%;
   	 width: inherit;
	}
}

Which works in desktop view, but in mobile view the logo is much on the left.

If you tell me more code to try I will dream of it! And they will not be sweet dreams!  ;)  Please, what code should I try? What must be deleted, what must stay?  O:-)

Re: forum logo in mobile view

Reply #11 –

I think, you don't need this at all, Jorin... it makes the submit-button a little to high:

Code: [Select]
.centerheader #logobox, .centerheader #logo, .centerheader #siteslogan, #top_section_notice .button_submit {
    box-sizing: initial;
}

I also think, it is enough to set one size for the media thing...the smaller one will always  be the same?

Not sure about everything, but I would give just this a try:

Code: [Select]
.centerheader #logobox {
    max-width: 100%;
    width: inherit;
    margin-right: 2px;
}

@media screen and (max-width: 33.750em) {
	#logobox, .rightheader #logobox {
		background-image: url(http://forum-alternative-antriebe.de/themes/bluesky/images/forumlogo_mobile.png);
		background-repeat: no-repeat;
	}
	#logo {
		visibility: hidden;
	}
	
}

Re: forum logo in mobile view

Reply #12 –

Okay, added this code now. With my IE in my office the logo still jumps to the left in mobile view. That's the only browser I can test right now. Maybe it's a collision with the bootstrap CSS file?

Re: forum logo in mobile view

Reply #13 –

You know, that I have no mobile phone, Jorin. I made a test in Opera, FF and IE by  zooming in browser and simulate a small screen as it (maybe) would be in the mobile view by making my browser window very narrow. The logo stays always centered for me.

Sorry, I really would have liked to help you.

Re: forum logo in mobile view

Reply #14 –

That's strange. Your IE showed it centered, mine not.