Hi there, I've made some edits to the header css code to allow for a wider logo in the header. I noticed that it is not big enough when visiting the forum on a mobile device. Is there separate code to edit to get a bigger logo when it resizes for a mobile device?
Mobile Logo not resizing
Collapse
X
-
What CSS changes did you make to the header and what is the actual size of the logo and how big do you want it to be in mobile device? -
I've changed only a few parameters in css_global.
Now that you ask those questions, I think I'm starting to realize that the issues might be because the actual uploaded logo image is large (in pixels) then the sizes I've specified in the css_global?
When viewed from mobile I would like the logo to fill the header area or close to it.
#header .site-logo {
padding: 22px 10px 26px;
background:transparent;
min-width:400px;
max-width:600px;
position:relative;
text-align:{vb:stylevar left};
}
#header .site-logo img {
height:auto;
width:auto;
max-width:600px;
Last edited by sparkybp; Thu 15 May '14, 5:46am. Reason: I've just resized the actual logo size to the max width, it did not seem to affect the logo when viewed from mobile. Also another note is that the logo is not as tall as I'd like it to be when viewedComment
-
Try adding this in css_additional.css template:
Code:@media only screen and (max-width: 600px) { #header .site-logo img { width: 100%; } }
Comment
-
-
Can you post a link to your site?Comment
-
Put this in the Media Query that Glenn provided:
Code:#header .site-logo img { height: auto; width: auto; max-width: 320px; }
Translations provided by Google.
Wayne Luke
The Rabid Badger - a vBulletin Cloud demonstration site.
vBulletin 5 APIComment
-
http://sportbikemovement.ca I've tried both suggestions, none of them seem to increase the height of my logo when viewed from an iPhone 5Comment
-
Remove height: auto (as it is already by default) and replace it with max-height: none;
Code:@media only screen and (max-width: 600px) { #header .site-logo img { width: 100%; [COLOR=#0000FF] max-width: none;[/COLOR] } }
Code:@media only screen and (max-height: 320px) { #header .site-logo img { [COLOR=#FF0000]max-height: 32px;[/COLOR] width: auto; } }
Last edited by glennrocksvb; Sat 17 May '14, 12:24am.👍 1Comment
-
Glad you got there.MARK.B
vBulletin Support
------------
My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
My Unofficial vBulletin Cloud Demo: https://www.adminammo.comComment
-
How can I use a different logo for mobile devices versus what is displayed on desktop version? Thanks.Comment
Related Topics
Collapse
-
by haloamorThe header logo looks great on browser but super small on mobile compared to the ads on top of it.
What can I do to tweak this?-
Channel: Support Issues & Questions
-
-
by popimp3069I have two logos (as one logo) as my site header logo. How can I make these logos stack on mobile devices? See desktop layout below. Thanks.
...-
Channel: vB Cloud Support & Troubleshooting.
-
-
by twoladybugsMy header logo looks correct on my forum, but on my phone it shows HUGE. I tried
#header {background-size:contain} but that didn't do anything. Advice?-
Channel: Support Issues & Questions
-
-
by MilforumI have some additional usergroups with ranks. Some of these are the same width as the primary group rank symbol (currently 50px) whereas some are smaller (16 px). The latter are not centered in the postbit...
-
Channel: Support Issues & Questions
-
-
by MupetzHello,
My logo is 320px width, which is maximum recommended for mobile devices.
This is how it looks like when browsing my mobile device vertically:
http://quirktools.com/screenfly/...-
Channel: Support Issues & Questions
-
Comment