Issues with mobile responsiveness

[Kaspar]

Hi,
We’re testing the responsiveness of our app and are seeing some weird behaviour for smaller devices.
When using medium sized mobile device, the default language (English) appears as expected but when setting the language to Norwegian the text overflows (see screens below).

We’re also experiencing issues with small mobile devices where the text for both default (english) and norwegian overflows.

We can’t figure out why this is happening when looking through the styling responsive set up of our app.

Any suggestions?

[Shahitha]

Hi!

Very strange behaviour indeed. Is the responsiveness still off if you change the default to Norsk and switch to English? It would also be great if we could get a few screenshots of the build in Create (the containers etc.)

[Kaspar]

Setting the default to Norsk (by changing our App Variable’s Value on Load to “Norsk”) results in the same behavior. Note that in our “Internationalization” pane English is still set as the default language.

Below is a screen of our build and from the designer.

• The first two containers have positioning relative and some offset values.
• The third container has default values except for height which is set to 100%.
  • The first child container has display: flex (vertical), some padding and height: 5%
  • Second child container has display: block and some padding
    • The first child container has display: flex (vertical) and justify-content: center
    • The second child container has display: flex (vertical) and align-items: center
      • Inside the Visibility group both container has flex-child: center, display: flex (vertical) and align-item: center

Hope this helps!

[kristian]

Hi,

Could you try setting Max Width of the Container (surrounding the overflowing text) to 100 %? Otherwise it might sound like you will need to contact you Appfarm contact, in order to facilitate access to the solution for trying to support.

One thing you may try: Set the default language to Norwegian and see if it helps (just temporarily, to test a hypothesis). It could be an issue related to the width being calculated based on english text initially, but not recalculated on language switch. However, you did change that on app load, but it might be that UI loads before that happens. Just a thought - worth a shot.

[Kaspar]

Just tried both setting Max Width and changing default language (without actually changing the text value for the languages) but we don’t see changes to the responsiveness. But thanks for the suggestions