Why I'm seeing different views between the preview mode and on designer

Hi All, I’d like get help with different views between the preview mode and the designer mode. Here are the screenshots.

Here is the preview link. Webflow - Verbleif's New Project

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

Hey @Sabbir , this is due to different display scale sizes.

In your designer, you will notice it is 1920 @ 59.1% whereas in preview mode, it is 1920 @ 82.3%. Always make sure the scale is 100% while designing to be safe.

1 Like

Thank you very much for your kind help. Now I’m trying to set it 100%. But, why it’s not increasing. Am I doing any wrong?

Hello @Sabbir, you can’t scale it up if you set the width of the designer (the number on the left of the scale) to be more than the actual available width

I really need help with this. :sob:

Hey @Sabbir , a quick workaround to fix your issue with the overlapping image would be to set your hero-content-image to absolute-bottom with these parameters. Make sure you are in the MAIN DESKTOP BREAKPOINT for this to reflect across your other created breakpoints.

Screen Shot 2021-08-24 at 1.04.37 PM

Also, switch the width of these images from % to px instead. 700px for the Main Breakpoint and tweak from there. Since you were using %, as the screen gets wider, so does the image and therefore will overlap your text.

Also, I am not a huge advocate on managing all these custom breakpoints and prefer to only work on the main breakpoint. If you want to get rid of the breakpoints, you can look at @Finsweet 's new extension below.

1 Like

Thanks again for your kind help. Also the for the extension. I’d really love to have a look.

1 Like