KlausSchaefers/vue-low-code

Can't get Mobile Responsiveness to work.

emzuwa opened this issue · 5 comments

Hi @KlausSchaefers

I can't seem to get the mobile responsiveness working for my project.

Configurations I made:

config: {
        responsive: [
          { page: "Desktop", types: ["desktop"] },
          { page: "Mobile", types: ["tablet", "mobile"] },
        ],
}

I also gave the same name for the home screen in the Desktop and Mobile figma pages

It can be tested in same repo and project link:
https://www.figma.com/file/uKgt9PzMeazuh8SqXJQoVs/Figma-low-code-route-test?node-id=0%3A1
https://github.com/kingzley/figma-low-code-test

Is there any extra configuration I am missing?

Thank you.

For me it seems to work:
Luisa-cloud (4)

Can you try two things:

  1. Download the file again

  2. If that does not work: Try the live mode by passing the the file id and Figma token?

If you open the debit console, you should see some output like

QUX.getResponsiveModel() > Pages >desktop Desktop
QUX.getResponsiveModel() > exit : desktop

QUX.setDeviceType > exit desktop 1612
QUX.setDeviceType > exit desktop 1612
QUX.setDeviceType > exit mobile 375

QUX.setDeviceType > exit mobile 375
QUX.getResponsiveModel() > Pages >mobile Mobile
QUX.getResponsiveModel() > exit : mobile

I had to deploy update to heroku and test with my phone, and it works. http://figma-low-code.herokuapp.com/

I discovered something strange. See screenshot below.
When I reduce the window size, it doesn't respond.
However when I click the "toggle device toolbar", it works, but takes some seconds to respond.

But it works well and fast on my phone though. Would be using my phone to test.
Thanks a lot @KlausSchaefers .

strange