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.