Announcement

Collapse
No announcement yet.

Userfield bug mobile style

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

  • [Bug / Issue] Userfield bug mobile style

    I have installed some CSS codes, and does work very well on desktop mode, but when accessing from mobile, it's very buggy.

    Is there any way to fix that ?

    That is the bug from mobile:
    Click image for larger version

Name:	byf.png
Views:	78
Size:	572.4 KB
ID:	4433336
    And this is from desktop mode:

    which I'm happy with it.


    Click image for larger version

Name:	Annotation 2020-02-01 153625.png
Views:	55
Size:	106.0 KB
ID:	4433337

    Any idea how I can fix the bug from mobile version ?

    Thanks


  • #2
    There is not enough information to assist.

    If you have added custom css, then it is not a bug with the software, it is an issue with the code you have added.

    Whilst we don’t support custom code, a link to an example page, along with the css you added, will allow us to try and find the problem.
    MARK.B | vBULLETIN SUPPORT

    TalkNewsUK - My vBulletin 5.6.0 Demo
    AdminAmmo - My Cloud Demo

    Comment


    • #3
      Originally posted by Mark.B View Post
      There is not enough information to assist.

      If you have added custom css, then it is not a bug with the software, it is an issue with the code you have added.

      Whilst we don’t support custom code, a link to an example page, along with the css you added, will allow us to try and find the problem.
      I did in PM

      Comment


      • #4
        Originally posted by Mark.B View Post
        There is not enough information to assist.

        If you have added custom css, then it is not a bug with the software, it is an issue with the code you have added.

        Whilst we don’t support custom code, a link to an example page, along with the css you added, will allow us to try and find the problem.
        Let me know if you want me to send you the CSS code. I have added some status quotation code, did messed up a bit postbit.

        Comment


        • #5
          We cannot provide support by PM, sorry.

          If you don’t feel able to post the CSS in the forum, then if you have a valid support contract please raise a support ticket.
          MARK.B | vBULLETIN SUPPORT

          TalkNewsUK - My vBulletin 5.6.0 Demo
          AdminAmmo - My Cloud Demo

          Comment


          • #6
            Originally posted by Mark.B View Post
            We cannot provide support by PM, sorry.

            If you don’t feel able to post the CSS in the forum, then if you have a valid support contract please raise a support ticket.
            Hi again. here is the CSS code which messed up my postbit . Idk is there something wrong ?

            If you can help

            Code:
            .b-userinfo__additional-info {
            border: 1px solid #dfdfdf;
            background: #fff;
            padding: 4px;
            margin-bottom: 5px;
            }
            
            .b-userinfo__additional-info label {
            float: left;
            }
            
            .b-userinfo__additional-info span {
            float: right;
            }
            
            .b-userinfo__additional-info:after {
            content: "";
            display: table;
            clear: both;
            }
            .b-userinfo__details {
            width: 150px;
            margin-left: -10px;
            }
            
            
            .vb5-noypiscripter-status-update-postbit {
            font-style: italic;
            background: rgba(255,255,255,.75);
            padding: 10px 20px;
            text-align: left;
            border-radius: 5px;
            box-shadow: 0 3px 8px rgba(0,0,0,.18),0 4px 16px rgba(0,0,0,.36);
            position: relative;
            background: #f1f3f3;
            border: 1px solid #60686c;
            order: 1 !important;
            margin: 0 0 15px;
            }
            .vb5-noypiscripter-status-update-postbit:after {
            content: "";
            position: absolute;
            top: -20px;
            left: 65px;
            width: 0;
            border-bottom: 20px solid #f1f3f3;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            }
            .vb5-noypiscripter-status-update-postbit span {
            background: transparent url("images/css/sprite_icons_vb_ltr.png") no-repeat scroll -16px -80px;
            width: 13px;
            height: 12px;
            display: inline-block;
            text-indent: -99999px;
            overflow: hidden;
            }
            .vb5-noypiscripter-status-update-postbit span:first-child {
            margin-right: 2px;
            margin-left: -13px;
            -moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
            }
            .vb5-noypiscripter-status-update-postbit span:first-child + span {
            margin-left: 2px;
            margin-right: -13px;
            }
            .b-userinfo__additional-info-block {
            display: flex;
            flex-flow: column wrap;
            }
            
            .vb5-noypiscripter-status-update-postbit {
            order: 1 !important;
            margin: 10px 0 20px 0; /* you may need to tweak this to adjust to your needs */
            }
            
            /* for mobile */
            .l-small .vb5-noypiscripter-status-update-postbit {
            margin-left: 10px; /* you may need to tweak this to adjust to your needs */
            }
            
            .b-userinfo__additional-info-block .b-userinfo__additional-info:first-child {
            order: 2;
            }
            
            .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(2) {
            order: 3;
            }
            
            .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(3) {
            order: 4;
            }
            
            .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(4) {
            order: 5;
            }
            
            .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(5) {
            order: 6;
            }
            
            .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(6) {
            order: 7;
            }
            
            .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(7) {
            order: 8;
            }
            
            .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(8) {
            order: 9;
            }
            
            .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(9) {
            order: 10;
            }
            
            .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(10) {
            order: 11;
            }
            media (min-width: 768px) and (max-width: 800px) {
            .l-desktop.pageX .l-row__fixed--right > .l-col__flex-6.l-col--flex-first {
            width: 100%;
            margin: 0;
            float: none;
            padding: 0;
            }
            .l-desktop.page1 .l-row__fixed--right > .l-col__flex-6.l-col--flex-first > .l-col__flex-content { margin: 0; }
            .l-desktop.page1 .canvas-layout-container .canvas-layout .canvas-widget-list,
            .l-desktop.page1 .canvas-layout-container .canvas-widget { width: 100%; }
            }

            Comment


            • #7
              The CSS code does work fine on desktop, but is messed up when accessing from mobile

              Comment


              • #8
                If you remove it all, does the problem go away?
                MARK.B | vBULLETIN SUPPORT

                TalkNewsUK - My vBulletin 5.6.0 Demo
                AdminAmmo - My Cloud Demo

                Comment


                • #9
                  Originally posted by Mark.B View Post
                  If you remove it all, does the problem go away?
                  Yes. I have other CSS code, but does not cause issues on mobile version

                  Comment


                  • #10
                    Originally posted by Mark.B View Post
                    If you remove it all, does the problem go away?
                    I have this code as well, to display reputation description below the reputation bar
                    Code:
                    .b-meter:after { content: attr(title); position: relative; top: 0; left: 0; white-space: pre-wrap; margin: 0 -8px; display: block; } .l-small .b-meter:after { margin: 0; } .b-meter__bar { margin-left: -2px; display: inline-block; float: none; }

                    Comment


                    • #11
                      Originally posted by Mark.B View Post
                      If you remove it all, does the problem go away?
                      And also because of this plugin too
                      https://vbmods.rocks/forum/vbulletin...ate-in-postbit

                      but it does work fine on desktop, so maybe there's some css to fix it ?

                      Comment


                      • #12
                        Please can you answer the question I asked?
                        We can't provide support if the questions we ask go unanswered.
                        MARK.B | vBULLETIN SUPPORT

                        TalkNewsUK - My vBulletin 5.6.0 Demo
                        AdminAmmo - My Cloud Demo

                        Comment


                        • #13
                          Originally posted by Mark.B View Post
                          If you remove it all, does the problem go away?
                          Yes, It does go away.

                          Comment


                          • #14
                            Originally posted by Faustvasea97 View Post

                            Yes, It does go away.
                            Ok, the next step is to add each section back in, one section at a time, and test after each one.

                            Eventually you'll establish which block is causing the issue...post back once you have that.
                            MARK.B | vBULLETIN SUPPORT

                            TalkNewsUK - My vBulletin 5.6.0 Demo
                            AdminAmmo - My Cloud Demo

                            Comment


                            • #15
                              The media query breakpoints are wrong but this is Glenn's modification and I'm not altering it.

                              Comment

                              Related Topics

                              Collapse

                              Working...
                              X