Buttons not responsive on mobile and header is not collapsing on the website

Hi good morning, I am having issues with my app because on the mobile phone it’s not being responsive. The buttons doesn’t work in mobile and the header is not collapsing to fit the screen. I tried reading other people’s post on this topic and I still didn’t understand the process on how to get it to work properly so I can have my team test the app. If someone can assist me with this it will be greatly appreciate it?

Have you tested your elements responsiveness via Responsive tab in the editor or Chrome DevTools? It’s easier to debug responsiveness using these tools - you will see when things start to go wrong.

1 Like

Yes I have and when I make the screen smaller it’s the same length. So I tried to do a conditional and it still didn’t work.

So share your conditions

1 Like

So I’m not sure what to do from here

You trying to add padding (distance between group side borders and inner elements inside it). So when your screen shrinks to 768px and less - padding doesn’t change?

The padding is still the same

None of the elements says that they are “Fixed” either

Have you checked using the “inspect element” feature of the debugger? Resize your window to <768px and check if you condition works

No I have not let me check it

this is how it looks in the responsive menu.

the menu is way in the right side and when you go on mobile it is literally on the far right and you have to scroll to see it. And when you tap the buttons they don’t respond.

What I mean is:

  1. run you app in preview mode (opens a preview with debugger)
  2. in the debugger check click on “Inspect” and choose your element from the dropdown):

Check if your conditions are true or false.

1 Like

I don’t see it being either True or False. This is what I see right here.

So right now your page is 1080px wide and your condition is not true (red).
Resize your browser window to achieve width <768px and reload it just to be sure element properties are updated.

Ok so this is what I did but I’m not sure how to make it True

Ah, my bad, I misread your condition as < or = 768px. So shrink browser window at least 1px more to make it maximum 767px or less.

P.S. Use cmd + shift + 4 combination to take a screenshot of selected area and don’t mess with your phone :wink:

Done! Now what do I do?

My bad. :joy: my damn laptop is slow as hell and I don’t want you waiting all day. But if you have time I’ll pull it up on my laptop.