Streaming live at 10am (PST)

The image goes beyond the div-block


#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!


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.


#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!


#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


#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:

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?


#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.


#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!