I had to completely rebuild my first EditorX site because the first version and copy kept having issues. The elements in EditorX stopped working, grids weren’t working, etc.
Now I have a site that looks ok on laptop and tablet, but it still isn’t great on mobile.
Are there any tips or strategies for getting the system to look good on mobile?
The preview for mobile looks fine, but when I go to the site on my phone the pages are too big and elements such as text are no longer in the right places.
Make sure your elements scale proportionally. If not, then make sure you at least edit the Max and Min height and width in order to ensure the elements scale correctly for different mobile screen sizes. The issue you may be having is that your mobile view is set at too large of an editing size for the device you own.
For example: An iPhone 11 has a screen width of 412 pixels. So if you are making edits on a 500 pixel template and you aren’t making it so the elements adjust their size proportionally then all of the elements on the remaining 88 pixels will not be visible on an iPhone 11 screen.
I will check whether things are set to scale proportionately, and if not, I will adjust the designs.
Would I need to design for multiple mobile screen-sizes? If so, I would need to research the different sizes.
It would be great to have an option that scales for mobile phone sizes. I will add that as a request to the appropriate channel. I am using an iPhone 11.
You can create breakpoints for different screen sizes. But my best tip is to edit on the 320 Pixel mobile size. If everything looks good on that template then it will look good on all mobile screen sizes larger than 320 px.