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

Re: forum logo in mobile view

Reply #30 –

I would use @emanuele 's code if he tells us.

Re: forum logo in mobile view

Reply #31 –

Quote from: Ruth – That one is not jumping to the little logo?
It doesn't because I removed it... yeah, I know it's cheating. O:-)
Seriously, I was not sure the about the reason behind the small logo, so I guessed it was small just because otherwise it was filling almost entirely the screen, so I just made it a little smaller and "clipped" (just margin/padding/overflow tricks) the original big images that has a huge transparent border at the bottom.

Quote from: Ruth – In Firefox it is looking like this, if I resize my browser-window as far as possible. It will get a scrollbar at the bottom and a black space on the right of the top.
That's interesting result (really, I wonder why it's acting like that, maybe some min-width somewhere), anyway that width should be about 300px, so (according to a random source picked from internet, I don't have better sources http://blog.fluidui.com/the-mobile-resolutions-to-be-aware-of-when-designing/ ) smaller than 98% of the devices used nowadays, I feel it can be overlooked. O:-)

The (relevant) CSS used there is:
Code: [Select]
/* Needed to fix the OpneID login button in the quick login */
#password_login .button_submit {
	box-sizing: initial;
}
/* Actually could be moved to a media query, but it can stay here as well */
/* Used to reduce the space taken up by the empty areas of the logo, especially at low resolutions */
h1 {
	margin: 0 !important;
}

/* Drops some unnecesary stuff to center the logo */
.centerheader #logobox {
	 width: auto;
	 max-width: none;
}

@media screen and (max-width: 50em) {
	/* Removes the quick login when it starts to collide with the search area */
	#top_section_notice {
		display: none;
	}

	/* Tweaks the height of the logo to avoid it taking up all the screen real estate */
	.centerheader #logobox {
		max-height: 105px;
		margin-top: -15px;
	}
}

@media screen and (max-width: 33.750em) {
	/* Again, even smaller logo */
	.centerheader #logobox {
		max-height: 55px;
	}
}
Most likely this may not work on your home page (usual problem with bootstrap kicking in), it may need some tweaks.
Bugs creator.
Features destroyer.
Template killer.

Re: forum logo in mobile view

Reply #32 –

It works really good, even on my bootstrap start page:

http://forum-alternative-antriebe.de

The only little thing I tuned up is the place between the logo and the menu icons, which were sometimes a bit too small, so the icons touched the logo. I modified the code with a margin-bottom 15px.

Thank you very much, both of you, @Ruth and @emanuele! Great job, well done!  :)

Re: forum logo in mobile view

Reply #33 –

It is looking quite nice in your forum, Jorin - except the open id button on your startpage...

Quote from: emanuele – That's interesting result (really, I wonder why it's acting like that, maybe some min-width somewhere...

No...I tried it again. O:-)  It just happened because my old pc has another resolution then others have. ::)  If I zoom a little in browser there will be no scrollbar and no black space at the top. Everything is fine than.

That page is very interesting, Emanuele...

Thank you for the code, I will give this a try. I would like to use another tiny logo in the mobile view, because our "normal" header is quite big, too big in the mobile view, as I believe... but there should be something.

Re: forum logo in mobile view

Reply #35 –

It has got another height as the other login...and the submit buttons are also not exactly at the same height. (I think it's because of box-sizing: initial in the code)

This is opera...but it looks the same in FF for me.

Re: forum logo in mobile view

Reply #36 –

Quote from: Ruth –
Quote from: emanuele – That's interesting result (really, I wonder why it's acting like that, maybe some min-width somewhere...

No...I tried it again. O:-)  It just happened because my old pc has another resolution then others have. ::)  If I zoom a little in browser there will be no scrollbar and no black space at the top. Everything is fine than.
hmm... I was having the same result with the scrollbar, no idea anyway.

Quote from: Ruth – Thank you for the code, I will give this a try. I would like to use another tiny logo in the mobile view, because our "normal" header is quite big, too big in the mobile view, as I believe... but there should be something.
To me, the small logo does make sense if you show it not centered, but moved on the left at the same height of the "search bar", otherwise if you keep it centered it doesn't make much difference. :)

Quote from: Ruth – It has got another height as the other login...and the submit buttons are also not exactly at the same height. (I think it's because of box-sizing: initial in the code)
This is because I (again) used the wrong id for the box-sizing initial, the correct one is:
Code: [Select]
#top_section_notice .button_submit {
	box-sizing: initial;
}
Bugs creator.
Features destroyer.
Template killer.

Re: forum logo in mobile view

Reply #37 –

Quote from: emanuele – This is because I (again) used the wrong id for the box-sizing initial, the correct one is:
Code: [Select]
#top_section_notice .button_submit {
	box-sizing: initial;
}

Fixed, thanks!

Re: forum logo in mobile view

Reply #38 –

Im struggling with this since yesterday to get a nice result...I have to make it different to this code, because we have a complete different header.

I have a question about those media-parts...

Why is this working?

Code: [Select]
@media screen and (max-width: 50em) {
	       .centerheader #logobox {
		max-height: 105px;
		margin-top: -15px;
	}
}

@media screen and (max-width: 33.750em) {
		.centerheader #logobox {
		max-height: 55px;
	}
}

I thought, if there is one advice in one media part you can not give another to the same thing? O:-) 
I had changed this part in my forum a few weeks ago, because I wanted to see the stats in the boards and topics with my screen.

Code: [Select]
@media screen and (max-width: 64em){
	    .board_latest {
                width: 40%;
	        min-width: 28em;	
		padding: 0 2px;}
		.topic_latest.relative {
                min-width: 24em;}
		.board_stats, .topic_stats {
                display: table-cell;}
}

And because of this, is that one not working:

Code: [Select]
@media screen and (max-width: 50em) {
.board_stats, .topic_stats {
                display: none;}
}

The stats are now always there, in any size of the browser-window or resolution. It is okay, it is not looking ugly... but I don't understand it really. Did I something wrong?

Re: forum logo in mobile view

Reply #39 –

Well, it was looking ugly... ;) I did not notice this before.

Jorin did send me screenshots from his mobile phone. I did some changes again about the stats and hope it will look better now. I can't see it really proper on my pc what it will look like in the mobile view. It also seems to be different in different browsers?