Mobile view does not match with mobile view in WF designer

Design help General
1

Hi!

When I am checking my design from my mobile then it is not matching with the design I have on WF designer for that mobile. Like, it is okay on WF mobile for iPhone 8 but on the actual phone, look is messed up, so I don’t even know what to fix as it looks okay on WF.

How can I fix this issue?

Thanks a lot!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @rakukai,

please provide us with a read-only link to your site, so we can look into the issue.
Here’s an article explaining how to share a read-only link with us.

Without any further information, it’s not possible to give solid answers to your question.

Cheers
Leon

3

Hi LeWolf!

Here it is: https://preview.webflow.com/preview/sprintforplanet?utm_medium=preview_link&utm_source=designer&utm_content=sprintforplanet&preview=3f5ebb48b46bffff3099f5e6f931e8ad&workflow=preview

I now checked the looks from other computers/phones/pads as well and seems I have serious issues with making the page responsive, so any help is much appreciated! Thank you!

4

It seems like your problem is tied to the containers with 100VH height.

Webflow preview might reduce the viewport width to simulate other devices, but not their height. However, you can resize your browser’s height to see the layout shifts before testing on other devices.

The content on your page simply is too much per container to fit inside of the viewport height of a smartphone.
You could:

  • Reduce typography size
  • Reduce content-per-container
  • Set a padding for mobile devices instead of a fixed height

I hope this helped!

Cheers
Leon

5

Hi Leon

Thank you! I guess I fixed the issue atm but I have another question. When I make changes in a Heading 2 on mobile view then why it also affects Heading 2 in the desktop view? Shouldn’t the changes made in ipad → mobile landscape → mobile view have an affect to the previous view?

Thank you
Kai

6

Changes made in the mobile view don’t affect any other views.
The base breakpoint allows to pass changes to all other views, the only exception is if there are already overrides on a specific element.

Here’s how Breakpoints work in Webflow.

If your problem is solved, please mark an answer as the solution.

Cheers
Leon