Announcement

Collapse
No announcement yet.

Mobile Logo not resizing

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Wayne Luke
    replied
    On vBulletin Cloud, you have two options to display a different logo to mobile,

    1) Create media CSS similar to the above. Hide the img tag with display:none and load a new image with a background.
    2) Create custom Javascript that rewrites the img tag on page load.

    Option 1 will probably be visually seamless but you can lose the logo link. Option 2 will change the logo after the original image loads.

    Leave a comment:


  • popimp3069
    replied
    How can I use a different logo for mobile devices versus what is displayed on desktop version? Thanks.

    Leave a comment:


  • Mark.B
    replied
    Glad you got there.

    Leave a comment:


  • sparkybp
    replied
    thank you guys, it works now! I appreciate it!

    Leave a comment:


  • Glenn Vergara
    replied
    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%;
           max-width: none;
        }
    }
    The reason the height is too short is because of this:

    Code:
    @media only screen and (max-height: 320px) {
       #header .site-logo img {
            max-height: 32px;
            width: auto;
        }
    }
    That is part of the default style and the whole thing is not actually needed at all. But well, it's there and adding max-width:none overrides it.
    Last edited by Glenn Vergara; Sat 17th May '14, 12:24am.

    Leave a comment:


  • sparkybp
    replied
    http://sportbikemovement.ca I've tried both suggestions, none of them seem to increase the height of my logo when viewed from an iPhone 5

    Leave a comment:


  • Wayne Luke
    replied
    Put this in the Media Query that Glenn provided:

    Code:
    #header .site-logo img {
    height: auto;
    width: auto;
    max-width: 320px;
    }
    Adjust max-width to suit your needs. The above is the default header code.

    Leave a comment:


  • Glenn Vergara
    replied
    Can you post a link to your site?

    Leave a comment:


  • sparkybp
    replied
    ok i did but it didn't seem to change it's height :

    @media only screen and (max-width: 600px) {
    #header .site-logo img {
    width: 70%;
    height: auto;
    }
    }

    Leave a comment:


  • Glenn Vergara
    replied
    Add height: auto;

    Leave a comment:


  • sparkybp
    replied
    That's better I reduced it to 70 percent and it seems to fit ok now but i wish it was a little taller it looks skewed

    Leave a comment:


  • sparkybp
    replied
    Thank you, it changed the logo size but unfortunately it stretched it beyond the viewable area of the phone and you would actually have to scroll over to see the whole thing. I'm going to try and mess with the width percentage!

    Leave a comment:


  • Glenn Vergara
    replied
    Try adding this in css_additional.css template:

    Code:
    @media only screen and (max-width: 600px) {
        #header .site-logo img {
            width: 100%;
        }
    }

    Leave a comment:


  • sparkybp
    replied
    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 15th 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 viewed

    Leave a comment:


  • Glenn Vergara
    replied
    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?

    Leave a comment:

Related Topics

Collapse

Working...
X