Zoomed in header on mobile version

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • niels94
    New Member
    • May 2015
    • 13
    • 5.1.x

    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
  • Wayne Luke
    vBulletin Technical Support Lead
    • Aug 2000
    • 73976

    #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:
            [USER="3396"]media[/USER] 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:
    There’s an easy, straightforward way to deliver responsive images that’s supported by all of today’s Web browsers: A CSS background image. However, the approach has some limitations, and it doesn’t work in all cases. But if your requirements aren’t complicated, and if you’re willing to make an extra effort to ensure your images are accessible, CSS background images may be all you need!
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API

    Comment

    • niels94
      New Member
      • May 2015
      • 13
      • 5.1.x

      #3
      Originally posted by Wayne Luke
      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:
      [USER="3396"]media[/USER] 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

      • Wayne Luke
        vBulletin Technical Support Lead
        • Aug 2000
        • 73976

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

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API

        Comment

        • niels94
          New Member
          • May 2015
          • 13
          • 5.1.x

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

          Comment

          • Wayne Luke
            vBulletin Technical Support Lead
            • Aug 2000
            • 73976

            #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 demonstration site.
            vBulletin 5 API

            Comment

            • niels94
              New Member
              • May 2015
              • 13
              • 5.1.x

              #7
              Originally posted by Wayne Luke
              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 29 May '15, 5:37am.

              Comment

              • Wayne Luke
                vBulletin Technical Support Lead
                • Aug 2000
                • 73976

                #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 demonstration site.
                vBulletin 5 API

                Comment

                • niels94
                  New Member
                  • May 2015
                  • 13
                  • 5.1.x

                  #9
                  Originally posted by Wayne Luke
                  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

                  • niels94
                    New Member
                    • May 2015
                    • 13
                    • 5.1.x

                    #10
                    Any help, please?

                    Comment

                    • Wayne Luke
                      vBulletin Technical Support Lead
                      • Aug 2000
                      • 73976

                      #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 demonstration site.
                      vBulletin 5 API

                      Comment

                      Related Topics

                      Collapse

                      Working...