Mobile and Tablet view not matching editor

[kristina-bowman]

I read a similar post with this problem and their solution was to change the margins and set them to percentages instead of px. It sort of fixed the title “My name is…” but the “nice to meet you” won’t cooperate. See below:

Here is the editor view

Live mobile:

I’ve tried closing and opening the editor and the live mobile/tablet browser. I waited to see if maybe there was a lag in publishing (which isn’t the case with desktop view, but you never know), this also didn’t work.

This site is only for me, but it’s concerning because if this were a client project I’d be in trouble. It feels counterintuitive to make all these edits only to find out the edits you made aren’t displaying correctly… The desktop version looks exactly the same as the editor, why isn’t this the case for the other viewports?

Another weird thing is that some items actually do reflect changes the way they’re supposed to… What the heck Is there some kind of secret setting I’m not aware of? Is this a possible bug?

Thank you in advance!

[Rob]

Hey @kristina-bowman , going based on the screenshots it’s difficult to tell exactly what is causing it but definitely seems to be the docking elements. It could be that the docking for some elements are at the top and others in the bottom so they “clash” when on smaller breakpoints.

Would probably recommend using either a layouter or grids to organize the section and keep the elements separate.

[kristina-bowman]

Hi Roberto,

Thank you so much for the recommendation! That made a huge difference and it’s behaving the way I want it to now. I truly appreciate it!

[Rob]

@kristina-bowman Of course. In the beginning I would strictly work with only the docking and margins but it makes it a lot to keep track of then. Best to try to structure and organize elements.

It has the added benefit of limiting the work you need to do on other breakpoints too. Just change the layout and you’re about halfway done with the new breakpoint.