Buttons font size changed after WP update on mobile

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

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; 
			}
		
}

• This reply was modified 4 years, 7 months ago by activequilibreyv.

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.

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:

View post on imgur.com

On moobile:

View post on imgur.com

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 years, 6 months ago by Bishal.
• This reply was modified 4 years, 6 months ago by Bishal.

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 )