Announcement

Collapse
No announcement yet.

Fix for narrow 70-column in a 70/30 screen layout on Homepage for iPad in Portrait Mode

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Free Mod Fix for narrow 70-column in a 70/30 screen layout on Homepage for iPad in Portrait Mode

    If your vBulletin 5 forum is using the default 70/30 screen layout on homepage, the 70-column is too tight and too narrow on iPad portrait mode (or any other devices with 768 screen width). See screenshot below.

    Click image for larger version  Name:	homepage-on-ipad-portrait.png Views:	1 Size:	93.9 KB ID:	408

    This issue occurs because in vB5's Responsive design, iPad is treated to be in "desktop" view. The breakpoint for "desktop" view is 768px and up. Any size lower than that is considered to be in "mobile" view.

    If you want the homepage to be in "mobile" view on iPad portrait mode so that the homepage modules display in full-width, then you need to add this in css_additional template or via Sitebuilder > Style > CSS Editor.

    Code:
    @media (min-width: 768px) and (max-width: 800px) {
        .l-desktop.page[COLOR=#FF0000]X[/COLOR] .l-row__fixed--right > .l-col__flex-6.l-col--flex-first {
            width: 100%;
            margin: 0;
            float: none;
            padding: 0;
        }
        .l-desktop.page[COLOR=#FF0000]X[/COLOR] .l-row__fixed--right > .l-col__flex-6.l-col--flex-first > .l-col__flex-content { margin: 0; }
        .l-desktop.page[COLOR=#FF0000]X[/COLOR] .canvas-layout-container .canvas-layout .canvas-widget-list,
        .l-desktop.page[COLOR=#FF0000]X[/COLOR] .canvas-layout-container .canvas-widget { width: 100%; }
    }
    where X is the page id of the homepage. Change it appropriately according to the page id for your own forum. To find the page id, go to homepage, right-click and choose "Inspect element" and then look for the <body> tag. You would see "pageX" in the body tag's class attribute. Adding .pageX in the CSS rules limits the scope of the style to the homepage only.

    Screenshot:

    Click image for larger version  Name:	homepage-on-ipad-portrait-fix.png Views:	1 Size:	84.5 KB ID:	409

    Demo:
    See homepage of this site, vbmods.rocks, on iPad portrait mode (or using the browser's device emulator just like in the screenshots) and notice all the modules are displayed in full-width.
    Last edited by glennrocksvb; 12-15-2017, 10:05 AM.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    Thanks! This has resolved a number of user complaints. Also, usually, the page ID is 1 for the homepage... though, not always.

    Comment


      #3
      Glad this helps your site.
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #4
        hmm this is interesting...fwiw i had hacked a solution to hide the widgets with css and then adjust the forum width.....seemed to work well on what i tested so far, but of course certain window resize pops out of whack for a few pixels...i left the video widget which gets positioned below...

        is it so bad to approach like this? i got curious...im sure i could improve it, but now im thinking of switching over to this alien codes you got with the "
        .l-col__flex-6.l-col--flex-first" and blah whatever hmm
        Code:
        /*side widget killer for mobile*/
        @media screen and (max-width:800px)
        {div#widget_5.b-module.canvas-widget.default-widget.custom-html-widget {display:none}}
        
        @media screen and (max-width:800px)
        {div#widget_4.b-module.canvas-widget.default-widget.wol-widget {display:none}}
        
        @media screen and (max-width:800px)
        {div#widget_6.b-module.canvas-widget.search-widget {display:none}}
        
        @media screen and (max-width:800px)
        {div#widget_138.b-module.canvas-widget.default-widget.custom-html-widget {display:none}}
        
        @media screen and (max-width:800px)
        {div#widget_389.b-module.canvas-widget.default-widget.custom-html-widget {display:none}} 
        
        @media (max-width:800px) and (min-width:650px){.forum-list-container{width:700px;}}
        /*side widget killer for mobile*/

        Comment


          #5
          Why would you hide some modules in mobile view? I don't think it's a good idea to penalize mobile users with less content just because they're viewing in small screens.

          Btw, your code could be simplified as:

          Code:
          @media screen and (max-width:800px) {
              #widget_4,
              #widget_5,
              #widget_6,
              #widget_138,
              #widget_389 { display: none; }
          }
          @media (min-width:650px) and (max-width:800px) {
              .forum-list-container { width:700px; }
          }
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


          • IggyP
            IggyP commented
            Editing a comment
            well i think the idea was that it was a fix for portrait tablet....landscape will still show the modules...i tend to not like making the page much longer with modules that are redundant or arent essential...like search or &quot;latest topic&quot; types...(if thats even possible?)

            i hadnt thought about penalizing smaller views tho hmm, well...it seems vb responsive cuts them off by default anyway..

            thanks for the input

          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            Modules have settings to display them in Desktop, Small and Extra Small screen sizes.

          • IggyP
            IggyP commented
            Editing a comment
            oh yes, i had forgotten i unchecked them some time ago)...that makes sense...hmm its interesting to think about....im not a &quot;phone guy&quot; at all so i can tend to think as little as possible on those...haha i was even given an s5 3 months ago and its still in the box

          #6
          Correct me if I am mistaken, but wouldn't the default module options take care of most of this? That is, with the exception of a few odd screen sizes, mostly on older cell phones, all this was taken into account when they changed to vB5.

          Click image for larger version

Name:	Clipboard01.jpg
Views:	208
Size:	13.8 KB
ID:	1347
          If you don't want a module to display at a certain resolution, uncheck it.

          And what ever happened to medium?
          640x480 is XGA-VGA standard; 800x600 is VGA standard; 1024x768 is still considered SVGA standard. Over 1024 and it goes into HD which has no standard.
          The first post code works for a few non-standard screens needing just a little more space, but I don't see the need for the other sizing code to hide the modules.
          Then again, it is 7am here, haven't slept in 2 days, and may be missing something obvious.

          Comment


            #7
            I installed this and it helps. But i still cant get my banner to fit on top of the nav bar. There is a space between the bottom of the banner and the top of the nav bar. Is there a fix for that?

            Click image for larger version  Name:	image2.png Views:	1 Size:	501.7 KB ID:	8367

            Click image for larger version  Name:	image1.png Views:	1 Size:	671.2 KB ID:	8366

            Comment


              #8
              Wow i needed this all along and did not know about it.

              Comment


                #9
                I just received this screen shot of someone trying to visit my site with an ipad. Any suggestions? I implemented the above css but no changes:

                Click image for larger version

Name:	IMG_0057.PNG
Views:	215
Size:	419.9 KB
ID:	10317

                Comment


                • glennrocksvb
                  glennrocksvb commented
                  Editing a comment
                  Do you still need help? I checked your site on iPad and it seems to be fixed now.

                • William
                  William commented
                  Editing a comment
                  glennrocksvb I am not sure. I put the above css in but it still renders as a desktop in my Firefox while simulating an Ipad at 768. I asked the person to verify if the issue is resolved but I haven't received word back yet.

                • glennrocksvb
                  glennrocksvb commented
                  Editing a comment
                  I only tried in Chrome emulator and not on actual iPad.

                • William
                  William commented
                  Editing a comment
                  glennrocksvb It looks like the css did work. Question, does the css also trigger the menu to run in mobile mode too?

                • glennrocksvb
                  glennrocksvb commented
                  Editing a comment
                  As long as it falls within the min-width and max-width range specified in the CSS. Otherwise, the range has to be adjusted to accommodate more screen sizes.

                #10
                How do you fix this issue on mobile ?

                Comment


                • glennrocksvb
                  glennrocksvb commented
                  Editing a comment
                  This is not an issue on mobile. Mobile displays one column by default.

                • Stevie
                  Stevie commented
                  Editing a comment
                  Not if you turn it to landscape

                #11
                This is on my iPhone X when on landscape, as you say it's all squashed up !

                Click image for larger version  Name:	IMG_0393.PNG Views:	1 Size:	737.5 KB ID:	10348

                Comment


                • glennrocksvb
                  glennrocksvb commented
                  Editing a comment
                  I'll check for solution

                #12
                Thank you it's appreciated

                Comment


                  #13
                  Try this potential fix for iPhone X.

                  Change:

                  Code:
                  @media (min-width: 768px) and (max-width: [COLOR=#FF0000]800px[/COLOR]) {
                  to:

                  Code:
                  @media (min-width: 768px) and (max-width: [COLOR=#FF0000]812px[/COLOR]) {
                  Let me know if it works.
                  Helpful? Donate. Thanks!
                  Buy me a coffeePayPal QR Code
                  Fast VPS Host for vBulletin:
                  A2 Hosting & IONOS

                  Comment


                  • watershed
                    watershed commented
                    Editing a comment
                    It absolutely does!

                Users Viewing This Page

                Collapse

                There is 1 user viewing this forum topic.

                • Guest Guest

                Latest Posts

                Collapse

                Working...
                X
                Searching...Please wait.
                An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                Please push the back button and reload the previous window.'
                An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                Please push the back button and reload the previous window.'
                An internal error has occurred and the module cannot be displayed.
                There are no results that meet this criteria.
                Search Result for "|||"