Support » Plugin: WordPress Button Plugin MaxButtons » Buttons font size changed after WP update on mobile

  • Resolved tylerphan91

    (@tylerphan91)


    Hi Bas,

    Hope you’re doing well.

    After the recent WP update, my Max buttons aren’t working properly on mobile device. I set the font size to be 20px and it remained the same across all devices before the update.

    Now, the font on mobile is very small compared to desktop and tablet. Everything is the same (padding, style, etc.) except for the font size. I included a few pictures to show you what I meant.

    Before | After | Plugin Settings

    Please let me know what you think the problem is.

    Thanks in advanced.

    -Tyler

Viewing 8 replies - 16 through 23 (of 23 total)
  • Thanks Bas, this works fine for almost all of my buttons. Now for 2 of them, I have to keep a bigger font-size. I tried different CSS code but I cannot find one that influence for instance the font-size for my .maxbutton14. I tried this:

    @media only screen and (min-width: 0px) and (max-width: 480px) {
        .maxbutton .mb-text
        {
           font-size: 16px !important; 
        }
    
    	.maxbutton-14 .maxbutton .mb-text
        {
    	   font-size: 29px !important; 
    	}
    }
    

    What’s wrong do you think?

    Many thanks!
    Yvan

    Plugin Author Bas Schuiling

    (@basszje)

    Hi,

    Try without a space between those two: .maxbutton-14 .maxbutton ( so: .maxbutton-14.maxbutton ).

    They are on the same element. With a space CSS thinks the latter is a child element and looks there ( like mb-text ) .

    You can see this in the normal button output as well

    Hi @basszje

    Even after turning off the “auto-responsive” mode, the text still appears smaller! I cleared the cache after doing that — still nothing!

    I’m not a very technical person but I enabled “Use external CSS mode” and then copied the button’s CSS in the additional CSS section of the theme.

    After that, I added this code you sent in the same additional CSS Section:

    @media only screen and (min-width: 0px) and (max-width: 480px) {
    .maxbutton .mb-text
    {
    font-size: 16px !important;

    }

    }

    And this worked! So, thank you for that! Now, the problem is: if I were to make changes to the button, I would have to copy the button’s CSS again and paste it into the theme. I really don’t want that!

    My question is: is it okay if I used the previous version of the button? Or would it make the site vulnerable to hacks? I was on version 8.0.4.

    Thank you!

    Thank you Bas for your help. I did play more with the developer tool in Firefox and the CSS from style.css. Now it’s working fine with this code, wich is 1) making every button having a font-size from 16px on small screens, but 2) making the 14th button having a 21px font-size and a hight of button of 100px on smaller screens.

    Nevertheless I still have the feeling that you should add to your plugin interface, for every ‘not very tech guys at all’ the option to alter the 80% ratio reduction of font sizes. A field option to alter it would be perfet 😉

    Many thanks again!
    Yvan

    1)

    @media only screen and (min-width: 0px) and (max-width: 480px) {
    
        .maxbutton .mb-text {
           font-size: 16px !important; 
        }
    }

    2)

    	.maxbutton-14.maxbutton.maxbutton-25-de-rabais-sur-votre-premiere-seance {
    		height: 100px !important;
    		}
    
    	.maxbutton-14.maxbutton.maxbutton-25-de-rabais-sur-votre-premiere-seance   
    		.mb-text {
    			font-size: 21px !important; 
    			}
    		
    }
    Plugin Author Bas Schuiling

    (@basszje)

    The problem with adding ‘another setting’ to the interface is that some other group of people will complain about that setting, and so on. This is why we made the responsive screens in the first place. When creating a new button it’s not more work, you could define the font sizes over there.

    Also the plugin worked exactly like this for the last 3-4 years and in that time we heard more complaints about the limitations of the responsive mode than the auto-responsive font changes.

    That said, we always think about how making things easier, while still keeping everybody else happy.

    @nirvanac19 I would not copy the whole button CSS to your theme, this is not needed, the extra CSS code should be enough.

    You are welcome to use the previous versions of the plugins, but this can create problems for the future when we update features or with new WordPress versions.

    Plugin Author Bas Schuiling

    (@basszje)

    Note that Version 8.2 now has settings to control both the button size and font size when using auto-responsive.

    Hi Bas,

    While I really appreciate your work and the new update but why ruin a perfectly good thing it was for many years with technicalities?

    I believe the added technicalities should be optional – let people who want to configure them have their option but the rest of the times for non-shopisticated users the normal settings of what it was earlier should be default.

    On desktop:
    https://imgur.com/O68fa1O

    On moobile:
    https://imgur.com/hzWA6OH

    The Auto font size reduction settings I did to “100 %” in Settings but doesn’t seem to work I cleared cache still doesn’t work.

    Please tell me how can I fix this.

    Edit: I used the code:

    @media only screen and (min-width: 0px) and (max-width: 480px) {
    .maxbutton .mb-text
    {
    font-size: 16px !important;
    
    }
    
    }

    in “Additional CSS” in WordPress Theme Customize and it fixes this immediately.
    But is there a better way?

    • This reply was modified 4 months, 2 weeks ago by bscogit.
    • This reply was modified 4 months, 2 weeks ago by bscogit.
    Plugin Author Bas Schuiling

    (@basszje)

    I think I explained the how and why in the previous post already. As it is now however, the plugin works (should work) out of the box exactly the same as previous versions, so I don’t really understand that problem.

    If you put the autofont to 100% , the font size should stay the same in mobile view . I can’t tell much from screenshots, so please post a link to a page where I can see the issue.

    Also note that you need to clear the button cache ( on the same settings page ) AND any page caches if you have those, whenyou make changes to those settings. ( I’ll put that on our todo list, since it would be better done automatically )

Viewing 8 replies - 16 through 23 (of 23 total)
  • You must be logged in to reply to this topic.