Font size break points for responsive design not working

Hi there.
I am strugging with setting the font sizes individually for mobile, tablet and desktop display. After I changed the size for H4 it is completely ignoring the original responsive settings and all efforts to set them manually using the responsive menu only results in changing it globally for any screen size at once.

Hope you can help.

Cheers,
Peter

    Luís

    Hi @peter126,

    Hope you're doing well today!

    I tried to replicate the issue in my install, but, honestly, I was unable.

    I changed manually all the type elements using the "Responsive mode" menu, all they changed correctly.

    Can you give us access to your admin panel, so we can check your issue? Give me an example for what font size you are trying to change for the H4, as an example.

    If you don't already know, please, follow the link below, to see how enable the staff login:

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    When you enable this option, please post again!

    Cheers, Luís

    Peter

    Hi Luis,

    thanks for your quick response.

    Sure thing. I have enabled the staff login for you.

    I had another thought on the problem. When I started working with Panino I remember having had that same problem earlier and made a complete reinstall to solve the problem. But I also have made some changes recently on the current install where changing font size worked just fine without destroying the break point settings.
    So here's my Sunday thought to the problem after having slept enough: I have a hunch it is a problem with the text box that I am using on the startpage. Very likely a bug. I think I made the changes in the setting of the text box and not in the general theme settings. Feels like this is creating an override to the general concept of how Panino is handling the breakpoints since it also created a situation where I can't undo my changes.

    If you want to play with it. Right on the startpage first text box with the orange background below the menu. H1 was being used by one of the plugins and I needed to use a smaller font there so I changed the textbox from H1 to H4 which was smaller but unused in the theme and then tried to change H4 to 45px - which then became active for phone, tablet and desktop. And trying to change it in responsive mode will always change it simulaneously for all other breakpoints. No matter if I am using phone, tablet or desktop for making the change.

    Incidently, I think I can also no longer use the global theme settings to make a change to H4. I have to go through the text box settings to have the changes make a difference.

    Cheers,
    Peter

    Peter

    Hi Luis,

    I just had some time to verify my theory. I had another installation of Panino that I could mess with and verify the problem.

    From what I can tell there is a bug in the system. Bit of a nasty pitfall. If you change the font size through the Theme's general settings everyhing works fine and you can define individual font sizes per text type and break point. I assume there also won't be any problems changing font color or even type for each break point like this if you should want or need it. Having a different logic behind the programming there doesn't feel likely.

    But.....

    Once you move to making the changes to the font on the level of a text box you're in trouble. The programming will simply not accept different settings per break point. I assume this will stretch to colour and font type as well. And if you are checking into this - I will bet a gigantic Cappuccino that this problem is not only limited to the text box but to any of the drag and drop elements in Upfront.
    It creates code somewhere in the depths of Upfront that overide and changes you make in the future for the text box or possibly any element and it is not reversible in Upfront. Make the change to element and you are screwed.

    If the logic was that you can override the general settings for a text box and so creating text box with individual behaviour that would be great. But if you make the change and EVERY text box behaves like that it's getting difficult. But once you can't even undo the changes you've got a problem

    Hope that clarifies my findings.

    Cheers,
    Peter

    Luís

    Hi @peter126,

    Hope you're doing well today!

    I think this happens because you changed the default preset of the text element.

    When you change the default preset it will have data assigned to it and will use that, because default elements are still default, even in responsive, that new data will overwrite other settings because of higher CSS specificity.

    When you change the default preset, all the elements using the default preset will be changed too. (you should always avoid to change the default preset)

    So, if you want to change just one element, the best option is add a new preset to that element and then, you will need to use media queries to change the "responsive" behaviour.

    Cheers, Luís