Editor and live mobile website deviate a lot. How do I make it work?

Hey!

I just can’t seem to figure out how to make the mobile version work considering that the editor and the published version differ so much.
What causes this and what can I do to fix it?

Thanks for your help, I do appreciate it!


Here is my site Read-Only: https://preview.webflow.com/preview/octomo-landing-page?utm_medium=preview_link&utm_source=designer&utm_content=octomo-landing-page&preview=c0335d5c5491004caad22f4f6fca4f1a&mode=preview
(how to share your site Read-Only link)

@fredj32 - Try these settings on Div Block 11 and remove the bottom margin from the image itself:

Let me know if that does the trick.

Hi Fredj32,
me again. Here is what I see, the issue is in the fact that all the images have different ratios and fit the container differently. since the height is what matters I recommend you do as follows:

Desktop View:
Div block 11: Height: auto (in all medias)
Give image6 , fixed height value of 220px

220px

(reccomend to fix margin bottom to 20px)

Tablet:
Give image6 , fixed value of 150px

Mobile Landscape and under:
Give image6, height auto

Make sure div block 11 has values set to auto in all Media Queries.

Cheers

Dritan! You are the man. You are the reason why my website finally works on mobile! Your advice, again, was spot on and very easy to follow. This saved me hours. Thank you so much!

Wish you a wonderful day!

Thank you too, Sam!