Explanation of device configuration changes between version 3.1.9 and 3.1.10

[sonvnn]

Hello Astroiders,

Because there are quite a few questions related to the issue of changing the way to configure devices according to min-width instead of max-width. So I created this discussion to be able to explain clearly.

As you know, today technology develops very quickly and many devices with large resolution parameters have appeared. Along with that is the need to configure basic parameters such as (font-size, line-height, padding, margin, etc.) for larger devices.
To keep up with the new trend and era. So I added 3 new devices to the configuration:

1. Landscape Mobile (Small)
2. Large Desktop (X-Large)
3. Larger Desktop (2X-Large)

But the problem is that the default configuration of the versions is default on Desktop devices (Large - @media (max-width: 1199.98px) { ... }). So if you add 2 devices (X-Large and 2X-Large) then users on devices with larger resolutions like iMac or PC with resolution larger than 1200px will not receive the default configuration of Desktop. Because it is formatted @media (max-width: 1199.98px). And it will seriously affect sites using Astroid.

You can see the code of the old version here:

See how version 3.1.9 works

And when adding new devices to version 3.1.9

The solution is to change the way to recognize the device configuration from max-width to min-width. From there, the default configuration from Desktop will change from @media (max-width: 1199.98px) { ... } to @media (min-width: 992px) { ... }. From there, larger devices like X-Large, 2X-Large will also receive the configuration from Desktop (Large) and it will help the current websites work normally. Even if there are larger devices like 3X-Large in the future, it will not affect the current configuration.

You can see the code of the newly updated version here

See how version 3.1.10 works

And when adding new devices to version 3.1.10

The only problem is that smaller devices (Mobile, Tablet) will not receive the configuration from Desktop (large). You just need to reconfigure the Mobile (Default) device to customize the configuration for devices smaller than Desktop. Basically, that will make you do less work than configuring the device according to Max-width.

You can discuss with me about this issue here. Any comments you have are very helpful to our community.

WBR,
Sonny

[sonvnn]

@Joomlaplates @WM-Loose @felixkat @templaza/astroid Changing the responsive functionality to suit the future is necessary. However, it can be difficult for those who have many websites using Astroid because editing the distance of the default device (mobile) will take a lot of time and cause frustration.

I have seen the urgency of this problem. In version 3.1.11, I have added the Safe Mode function to System - Astroid Plugin. You can go to the plugin and turn on this function. It will force the default device (mobile) to receive the value of the device closest to it. From there, the websites you are using will not need to edit Margin, Padding, Typography. They will work normally without any intervention.

Hopefully this feature will help you be less frustrated with this job.

To try it -> download v3-branch -> Install it -> Plugins -> System - Astroid Plugin -> Safe Mode "Yes"

Please tell me if you find any issue.
Best regards,
Sonny

[Heart1010]

In general when starting a new project with >=3.1.10 what is the "correct way" to add margin/padding?

Can we say (normally) it should be enough to fill only one value for margin/padding for the device size Standard and leave the rest completely blank so these values will be autom. calculated from the standard value?

[sonvnn]

Yes, you just need add value for standard. It will apply as global for all larger devices.

[Heart1010]

In the astroid template TWO (Quickstart) there are often just filled padding/margin values for Laptop and/or Desktop (rest nothing) for example. So when I use this template as a start/base the best would be to change this, remove those values and put only in the padding/margin in Standard, correct?

P.S.: Wouldn't it be good to change those padding/margin values to the new standard in the quickstart package itself?

[sonvnn]

Yes, I will update quickstart in the 3.1.11. At the moment, you can try to download v3-branch and try to use in Safe Mode. It will help your site run normally, without any change.

[WM-Loose]

@sonvnn Hi Sonny, is there any guarantee that Safe Mode will remain in Astrois in the future? We've noticed that when Safe Mode is deactivated, almost all websites experience problems. The layouts no longer work (padding, margin, etc.). Many customers simply don't adjust the settings, and when Safe Mode is no longer available, we spend hours fixing things, which many customers simply don't want to pay for. Therefore, it would be important to know whether Safe Mode will remain in place in the future so we can plan accordingly.

Since Safe Mode is automatically activated during updates (which is a good thing), users don't notice any problems at first. However, if Safe Mode is no longer available at some point, then action is called for.

[sonvnn]

Safe-mode will be available until Astroid 5. But it will not auto-enable-when-update in Astroid 4 to reduce processing in back-end. So you should recommend your client update their options asap.

[WM-Loose]

@sonvnn Okay, but there will still be problems. For example, if I disable safe mode, we have this problem again:
https://github.com/templaza/astroidpro/issues/15
I can't yet say why it's back now that you've already solved it after disabling safe mode, but the padding settings in the Astroid Layout module are being ignored again.

[WM-Loose]

@sonvnn I found the problem. If you select % as the size in Global, and this was only stored for Desktop in Safe Mode, after deactivation, all display sizes will not be set to % but to px. This requires revising all display sizes in all layouts. It took me two hours to do this for a client and a style. I think I'll be finished by Christmas :-(

[WM-Loose]

@sonvnn I no longer understand the principle of Safe Mode. All installations that have Safe Mode enabled and have entries for display sizes disappear completely when I deactivate Safe Mode. Why are existing entries for padding and margin present with Safe Mode and not transferred 1:1 when deactivated? Now I have to install all installations as backups and copies in a subdomain and compare all the settings (on the live site) with Safe Mode enabled and then in the copy without Safe Mode. Then adjust everything on the copy of the site, save/export the preset, and import it into the live site. Then deactivate Safe Mode. That can't be right, can it?

If I enter values ​​like padding and margin with Safe Mode enabled and then deactivate it, everything is empty. This means I can no longer see the individual values ​​for setting the other display sizes. That's really not good.

[WM-Loose]

We'll now proceed as follows:
Install a copy of the website as a subdomain. Safe mode is enabled. Then adjust all display sizes and at least enter what was previously added to the desktop in the global settings. This must be done for all sections and the module positions within them. We'll do this for the layout and fonts. Then save and export the preset. Then import the preset into the live site and disable safe mode.

There is one problem that we have already filed as an issue here and that must be addressed:
#1258
You should also pay attention to this.