General Request - Site Logo for Mobile Device (vBulletin Cloud)

[popimp3069]

I need help assigning a specific site logo file in the header when our forum is viewed from mobile devices. How can this be achieved?

Right now our forum header looks like the first image below on desktop. However, when viewing from a mobile device, the logo is too wide and doesn’t display properly.

https://i.imgur.com/4m8VfJ1m.png

I’d like to assign a different site logo image to display on mobile devices. Something like the second image below.

https://i.imgur.com/H15B0PY.png

Can anyone please help us implement the proper CSS to achieve this? Thank you.

[snakes1100]

As your site forces guests to the mobile style, we cant see the site on a mobile device in the desktop style.

As the example below in on a vb 4 site i run to correct for ads & bg images, not really fixing the logo size on the site, you can modify your templates & implement the changes using the @media for css, the code below is just an example.

As the pelican advert isnt part of your logo, id add some better screenshots of what youre trying to achieve.


.above_body {
background-image: url(forums/images/logo-bg-fade-2.png);
}

@media screen and (min-width: 320px) {
.above_body {
background-image: url(forums/images/logo-bg-fade-600x200.png);
}
}
@media screen and (min-width: 640px)
{
.above_body {
background-image: url(forums/images/logo-bg-fade-900x200.png);
}
}
@media screen and (min-width: 1024px) {
.above_body {
background-image: url(forums/images/logo-bg-fade-1900x200.png);
}
}

[In Omnibus]

The easiest solution would be to put the ad in a header ad module. Then the logo would resize according to the existing breakpoints.

[popimp3069]

First and foremost, thank you for the reply. It's very much appreciated.

Just for clarification, I am using vBulletin Cloud.

The Pelican logo is part of my header site logo. It is all one, continuous image. The 2 logos are not separate files. I joined these together in Adobe Illustrator and saved them as one file. When I first added this logo file to the header, it wouldn't display properly. So I went in to the Edit Site section on vBulletin cloud and there is a STYLE tab. I clicked on that and changed the max-with and max-height of the site logo CSS to 100% so that the single image would display across the entire section where the site logo goes in the header. See image.
https://i.imgur.com/xsgKLtKl.png
https://i.imgur.com/4m8VfJ1l.png

However, when viewing from mobile devices, this image doesn't respond as I'd like, so I think I need to utilize a different image or set of images altogether to replace the existing site logo. I imagine I would need to use some kind of CSS to keep the current site logo hidden on mobile, and then use media queries to assign a different site logo for mobile. My skillset just isn't there to tackle this. I'd like to have the 2 images stack one on top of the other, as such.

https://i.imgur.com/H15B0PYm.png

[delicjous]

Try this:

.l-small #header .site-logo img {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url("images/misc/vb_logo_darkblue.png") no-repeat; /* new logo path */
width: 180px; /* Width of new image */
height: 50px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}

[Seven Skins]

This css gives you the desired outcome, but you need to upload another logo image. Adjust the code accordingly.

@media screen and (max-width: 1024px){
#header .site-logo img{
height: 0px;
width: 0px;
}

#header .site-logo a{
display: inline-block;
height: 40px;
width: 200px;
background: url("images/misc/vb_logo_darkblue.png") no-repeat top left;
position: relative;
z-index: 1000;
}
}

[popimp3069]

I tried Seven Skins code but didn't have much luck. The original logo is still displaying with the logo that is assigned to the media query. How can I hide the logo that displays on desktop so it doesn't show on mobile?

https://i.imgur.com/2HelnxHl.jpg

[Seven Skins]

You should add the code to the additional.css template.
I cannot see that code in your additional.css

PS. make sure you are editing the correct style.

[popimp3069]

I did add it to the CSS of the template I’m currently using. It didn’t display properly, so I tried to revert back to what the CSS was before I implemented the new code. When I tried to revert the code, it didn’t revert back to what was previously there. I restored back to the default CSS and for some reason it removed all the CSS code that was previously there for the entire home page. I’m not sure how to get it back to what it had before any changes were made.

--------------- Added 1562119156 at 1562119156 ---------------

How can I center the logo on mobile so that when a phone is in landscape mode the logo stays centered?

[delicjous]

How can I center the logo on mobile so that when a phone is in landscape mode the logo stays centered?

https://vbulletin-forum.de/forum/englisch-area/templatemodifications/2005-center-logo-on-mobile-view#post2005

[popimp3069]

Thanks, delijous, but that code has another language in it. I'm a bit weary of trying to use it.

[delicjous]

Thanks, delijous, but that code has another language in it. I'm a bit weary of trying to use it.

Changed it to english. Means you have to change the height to fit your logo. Its a comment, o no affect to css.

[popimp3069]

Awesome! Thanks.