The image goes beyond the div-block

Design help General
1

Hello dears! All pages of my site start with a background image. These images are loaded in the Div-block, which has a fixed size: 100 vw and 100vh.

But for some reason the image inside the div-block goes beyond this div-block. I don’t even know how to explain it. Just take a look at the screenshots.

100 vw is overlay. And the image goes beyond the fixed position of 100vh, and it turns out very ugly. It’s infuriating!

Screenshot_126
Screenshot_1261902×951 208 KB
Screenshot_128
Screenshot_1281919×968 335 KB
Screenshot_130
Screenshot_1301919×954 348 KB
Screenshot_129
Screenshot_1291919×944 462 KB

I’ve been trying to find the cause of this problem for days. But I can’t. I really hope for your help, because I am convinced there are users who know webflow better than me.

I leave the link so you can see it live: http://warmth-webflow.webflow.io/post/what-will-website-be-like-in-100-years
And also leave the link to read: https://preview.webflow.com/preview/warmth-webflow?utm_source=warmth-webflow&preview=3e27899806339d2f1aef3b8f494bf5da

2

Hey @Bogette

Were you able to solve the design issue?
Looking over the site I’m not seeing the issue described.

Let me know and I’ll gladly help out.

3

Hello, @matthewpmunger

No, the problem is still there. Could you send me a screenshot?

4

Here’s the link you sent in both the designer and published links. I see an overflow issue in the designer but not the image and overlay issue.

09
093360×1936 770 KB

45
453360×1932 839 KB

1 Like
5

Thanks. This is weird :thinking:. Look, on the contrary, I have no problems in the designer. I think I should contact customer service. Because such “mistakes” are disorienting. And you can spend hours trying to solve a problem that does not seem to exist… Thank you again!

Screenshot_132
Screenshot_1321919×968 442 KB

6

If you do feel that you’re encountering a “bug” and not a design issue. Try opening the designer while in Incognito or Private mode to see if a browser plugin is causing the issue. If the bug persists you can contact support@webflow.com or start a new post in the Bugs category.

If it is in fact a design issue, please continue to use this forum. Myself and many others are here to help to the best of our abilities. Again if you can provide me with more details on where and how to see the issue, I will look into it further.

– Regards

1 Like
7

Hi @Bogette, one thing I noticed is that there is some custom code on the published site on the post templates page that is not properly wrapped in a script tag, which might be adding to the issue:

17%20AM
17%20AM2718×461 129 KB

Could you check that first, then when corrected, let me know so that I may take another look?

If the issue is solved, let me know that too.

8

hello, @cyberdave !

I did not wrap the script in tags because at the moment I do not want this script to work

The reason is different.

9

@cyberdave, Hi! I hasten to report that the problem in the blog disappeared on its own. I don’t know how it happened.

But there is no reason to be happy, because the problem is still present on static pages (About, Borrowers, etc). Do you have any idea why this might be happening?

Screenshot_133
Screenshot_1331919×969 315 KB
Screenshot_134
Screenshot_1341919×973 324 KB

10

@Bogette

Noticed that the overlay is set to position:absolute but its parent background-start is set to position:auto. Whenever using absolute positioning make sure that the parent is set to position:relative instead of auto.

Hope that helps.

1 Like
11

@matthewpmunger, mistakes in the simplest things. I checked everything down to every element on the page… And you were right, it helped. Thank you!

12

No worries. We all make mistakes and hit road blocks. Always glad to help whenever possible.

Happy designing!

1 Like