Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 28 Jun 2019, 15:41
popimp3069 popimp3069 is offline
 
Join Date: Feb 2018
Site Logo for Mobile Device (vBulletin Cloud)

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.



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



Can anyone please help us implement the proper CSS to achieve this? Thank you.
Attached Images
File Type: jpg Screen Shot 2019-06-27 at 10.23.01 PM.jpg (29.3 KB, 2 views)
File Type: png example.png (44.8 KB, 2 views)
Reply With Quote
  #2  
Old 29 Jun 2019, 10:55
snakes1100 snakes1100 is offline
 
Join Date: Dec 2001
Real name: Anthony
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.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Reply With Quote
  #3  
Old 29 Jun 2019, 12:37
In Omnibus's Avatar
In Omnibus In Omnibus is offline
 
Join Date: Apr 2010
Real name: Kris
The easiest solution would be to put the ad in a header ad module. Then the logo would resize according to the existing breakpoints.
Reply With Quote
  #4  
Old 29 Jun 2019, 13:08
popimp3069 popimp3069 is offline
 
Join Date: Feb 2018
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.



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.

Reply With Quote
  #5  
Old 01 Jul 2019, 09:37
delicjous's Avatar
delicjous delicjous is offline
 
Join Date: Nov 2014
Try this:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

__________________
vBulletin-Forum.de closed!
Reply With Quote
  #6  
Old 01 Jul 2019, 16:17
Seven Skins's Avatar
Seven Skins Seven Skins is offline
 
Join Date: Sep 2008
This css gives you the desired outcome, but you need to upload another logo image. Adjust the code accordingly.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Reply With Quote
  #7  
Old 02 Jul 2019, 02:06
popimp3069 popimp3069 is offline
 
Join Date: Feb 2018
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?

Reply With Quote
  #8  
Old 02 Jul 2019, 12:35
Seven Skins's Avatar
Seven Skins Seven Skins is offline
 
Join Date: Sep 2008
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.
Reply With Quote
  #9  
Old 02 Jul 2019, 13:15
popimp3069 popimp3069 is offline
 
Join Date: Feb 2018
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 03 Jul 2019 at 01:59 ---------------

How can I center the logo on mobile so that when a phone is in landscape mode the logo stays centered?
Reply With Quote
  #10  
Old 03 Jul 2019, 12:16
delicjous's Avatar
delicjous delicjous is offline
 
Join Date: Nov 2014
Originally Posted by popimp3069 View Post
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/eng...-view#post2005
__________________
vBulletin-Forum.de closed!
Reply With Quote
  #11  
Old 03 Jul 2019, 13:16
popimp3069 popimp3069 is offline
 
Join Date: Feb 2018
Thanks, delijous, but that code has another language in it. I'm a bit weary of trying to use it.
Reply With Quote
  #12  
Old 03 Jul 2019, 13:35
delicjous's Avatar
delicjous delicjous is offline
 
Join Date: Nov 2014
Originally Posted by popimp3069 View Post
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.
__________________
vBulletin-Forum.de closed!
Reply With Quote
  #13  
Old 03 Jul 2019, 14:32
popimp3069 popimp3069 is offline
 
Join Date: Feb 2018
Awesome! Thanks.
Reply With Quote
Reply

Similar Threads
Thread Thread Starter Forum Replies Last Post
Add-On Releases Mobile Device Style Assignment dartho vBulletin 3.6 Add-ons 406 20 Apr 2013 23:14



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 08:33.

Layout Options | Width: Wide Color: