Announcement

Collapse
No announcement yet.

Zoomed in header on mobile version

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

  • Zoomed in header on mobile version

    Hi guys,


    I'm using a customized header on my forum and when I'm check the forum on my mobile, everything is nice and responsive, except for the header. It only shows a zoomed in part of the header. I'm using vbulletin 5 cloud.

    1. Is there any way to make the header responsive?

    2. Is there any way to "enable" the desktop version for mobile?


    Thanks in advance,

    Niels

  • #2
    You can try using CSS like this:
    Code:
    #header {background-size:contain}
    Depending on your image this may work for you. You can also try:
    Code:
    #header {background-size:cover}
    You can also explicitly set the size for different devices using media queries. Something like:
    Code:
            media only screen and (max-width: 320px) {
                #header { 
                    background-size: 320px 30px; 
                    height: 30px
                }
            }
    If these don't work for you, then you might need multiple sizes of the image and use media queries to load the one that is most appropriate depending on screen size. You can read about this here:
    http://www.smashingmagazine.com/2013...ground-images/
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud customization and demonstration site.
    vBulletin 5 Documentation - Updated every Friday. Report issues here.
    vBulletin 5 API - Full / Mobile
    I am not currently available for vB Messenger Chats.

    Comment


    • #3
      Originally posted by Wayne Luke View Post
      You can try using CSS like this:
      Code:
      #header {background-size:contain}
      Depending on your image this may work for you. You can also try:
      Code:
      #header {background-size:cover}
      You can also explicitly set the size for different devices using media queries. Something like:
      Code:
      media only screen and (max-width: 320px) {
      #header {
      background-size: 320px 30px;
      height: 30px
      }
      }
      If these don't work for you, then you might need multiple sizes of the image and use media queries to load the one that is most appropriate depending on screen size. You can read about this here:
      http://www.smashingmagazine.com/2013...ground-images/

      Hi Wayne! Thank you for all the information. The second and third code don't change anything for me.

      However, the first one does seem to do something, but not correctly. It shows up on my mobile 4-5 times underneath eachother.

      Here's my CSS I'm using now, maybe it helps:

      #header .header-cell {
      height: 366px;
      }

      body {


      background: url(http://i59.tinypic.com/1z1fp1d.png) no-repeat center center fixed !important;


      -webkit-background-size: cover !important;


      -moz-background-size: cover !important;


      -o-background-size: cover !important;


      background-size: cover !important;


      }

      #footer-copyright { text-align: center; }

      #header .toolbar > ul li {
      bottom: -200px;
      position: relative;
      }

      .forum-list-container .category-header { background: url(http://i59.tinypic.com/35bcu88.png); }

      Comment


      • #4
        What do you have set for the header_background style variable?
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud customization and demonstration site.
        vBulletin 5 Documentation - Updated every Friday. Report issues here.
        vBulletin 5 API - Full / Mobile
        I am not currently available for vB Messenger Chats.

        Comment


        • #5
          Background color: Transparent
          Background image: url(http://i59.tinypic.com/x5tw5i.png)
          Background repeat: /
          Units: /
          Horizontal & Vertical Offset: 0

          Comment


          • #6
            If you set Background Repeat to none, it will not repeat your header image. However you'll end up with some white space due the height of 366 pixels that you're applying in the CSS. It is really tricky because we don't currently apply responsive resizing via Javascript and it is a background so you don't have as much control..
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud customization and demonstration site.
            vBulletin 5 Documentation - Updated every Friday. Report issues here.
            vBulletin 5 API - Full / Mobile
            I am not currently available for vB Messenger Chats.

            Comment


            • #7
              Originally posted by Wayne Luke View Post
              If you set Background Repeat to none, it will not repeat your header image. However you'll end up with some white space due the height of 366 pixels that you're applying in the CSS. It is really tricky because we don't currently apply responsive resizing via Javascript and it is a background so you don't have as much control..

              Thanks for the info. I see that there's a white space now. I tried to remove the 366 space, because I don't mind it being a little smaller. But that makes my whole header suddenly very small. I have no idea how to fix this and if it's fixable.

              Is there maybe a way to turn off the "mobile responsive" version? So that you're able to see the desktop version on mobile?
              Last edited by niels94; Fri 29th May '15, 6:37am.

              Comment


              • #8
                There is no way to "turn off" responsive.

                Personally, I would use multiple images tailored to the different viewport sizes and load them with media queries. Then you can control height, whitespace and distortion.
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                vBulletin 5 Documentation - Updated every Friday. Report issues here.
                vBulletin 5 API - Full / Mobile
                I am not currently available for vB Messenger Chats.

                Comment


                • #9
                  Originally posted by Wayne Luke View Post
                  There is no way to "turn off" responsive.

                  Personally, I would use multiple images tailored to the different viewport sizes and load them with media queries. Then you can control height, whitespace and distortion.

                  Hmm okay, thank you for the info.

                  I have no idea how I should start on that. Can you help me? I have no experience with CSS.

                  I'd need the CSS for mobile phones and tablets. I hope you're able to help me with this.

                  Comment


                  • #10
                    Any help, please?

                    Comment


                    • #11
                      I am sorry, I haven't had time to sit down and hand code a solution for this. You would have to follow the article above and write the code you need to show properly scaled images at different resolutions.
                      Translations provided by Google.

                      Wayne Luke
                      The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                      vBulletin 5 Documentation - Updated every Friday. Report issues here.
                      vBulletin 5 API - Full / Mobile
                      I am not currently available for vB Messenger Chats.

                      Comment

                      Related Topics

                      Collapse

                      Working...
                      X