iPad looks different even though breakpoint fits the viewport size

Discussion Ask a question
1

I had been adding multiple breakpoints in which one ranging from 1001px-1500px … I often use my iPad Pro 12.9" as a preview tool which should fit in this range both landscape & portrait . However after checking this breakpoint in preview on computer, it still looks different on the iPad.

  • some text in the header moves around (falls into 2 lines)
  • some text in a big paragraph on the homepage cuts of and fills an extra line

Please, any help is greatly appreciated. Been spending hours now on solving this without any success and it’s giving me a head in. This website I work on is for the company I work for and am thus limited on time.

Below I’ll upload some pictures to describe the issue best as possible.

  • first image shows my viewport size on my ipad
  • second image how it messes up on the ipad
  • third image how it should look in this breakpoint

2732×1181 167 KB

2732×2048 495 KB

1583×1290 119 KB

2

Commenting because I’m having the same issue. The breakpoints look good on editor but on real screens they look different.

3

Hi !

I have checked your website, and it seems like you managed to resolve some issues.

I would recommend testing your live site by using external tools like Viewport Resizer (it is a Google Chrome extension).

Viewport Resizer can help you to identify the layouting/alignment/sizing issues that you can fix in Editor X.

This is useful when using VH unit for sections. Because of VH unit Editor X Preview may fail to show the real picture because of some tech. limitations.

I have recorded the video showing how to preview your site when you use VH unit - https://www.screencast.com/t/FywifSDde9Ic

also, check information about stack in help center. It should make your life easier.

Also, I am not sure if you are aware of CSS Grids. This tool is essential when it comes to responsiveness.

I hope it was useful

4

@decadthelena Hi! pls check information above.

The behavior of the elements, especially with fluid measurements (e.g., vh, vw, %) depends on the viewport size. That’s why we need to make sure that site looks great across all viewports.

Use resizable handles in Editor X - https://support.wix.com/en/article/editor-x-previewing-your-site to see how the elements are arranged
Also, use external tools like viewport resizer

Cheers!

5

This is hilarious. The advice, to use an external tool to see how it looks like - from a product whose primary purpose is to be a WYSIWYG editor. How bad can a product fail its advertised and paid for purpose? It would be best to give us some money bag for all the hassle we have because of this lack of quality.

EditorX Team:
Why not just do it correctly in the EditorX tool?
Why not integrate Viewport Resizer in EditorX?
Why not buy Viewport Resizer?
Why not ask Viewport Resizer to help you build a properly working product?

6

Hi Georg,

Thank you for feedback.

I totally understand what you mean.

Using Viewport Resizer is my personal recommendation to designers that use VH unit (it is not the general recommendation that we have on company site). i find this tool helpful and user-friendly.

If you fully understand the outcome from using VH you can use only Editor X Preview, it is up to you.

I have mentioned above / in my video that we are working on improving site preview experience.

stay tuned !