Streaming live at 10am (PST)

Elements hidden from viewport


#1

Hello everyone,

I am having a bit of confusion, I hope you can help.
I have just tried opening my project in the editor, and some of the sections in my home page seem to have disappeared.
I haven’t edited this page of my site in a long time, so I don’t think I have changed anything recently that would cause this.
Also, I published the site to my webflow subdomain after noticing the problem and it looks fine, the content is there.
I also checked the archived versions of the site and the content has disappeared from all of them, but it definitely was there in the editor one year ago.

This was the first site that I made in webflow and there may be some structural mistakes in the way I’ve built my homepage. And it was so long ago that, to be honest, I don’t really remember exactly how I did get it to work the way I wanted in the end, that is why I am a bit scared to mess with it to find a fix.

I am wondering if a recent update in the editor has changed the way the elements are behaving?

I would really appreciate it if someone that knows what they are doing took a quick look at it and pointed towards a solution.

Here is my read only link:
https://preview.webflow.com/preview/milkshaken?preview=27d56550f7e2947d4e46dc82a46efe3c

and the published site:
http://milkshaken.net/

Thank you in advance :smiley:


#2

Hi @milkshaken!

Thank you for reaching out, and this definitely seems like odd behavior.

It sounds like you’ve been able to resolve the content appearance on your site, but I wanted to follow up to see if there was anything we could do to help further. I’ll need additional information to investigate other types of unexpected behavior you’re experiencing.

Would you be able to include screenshots (annotated if possible) showing the unexpected behavior?

Thanks!


#3

Hello @Andrew , thank you very much for your reply.
The issue is not actually resolved :upside_down_face:

Here are some screenshots:
In the first, please pay close attention to the scrolling bar in the editor, as you can see, I cannot scroll any further:

But in the live site, the content keeps on going as it should:

It should also be fairly easy to understand exactly what I mean if you simply load the read-only link next to a live version of the site, everything past the section called GRADIENT DIV BLOCK is invisible in the editor (and preview!) but not in the live site.

Please let me know if that makes sense, I look forward to your reply!


#4

Thanks for your followup –

I reached out to the Webflow team, and it looks like we were able to fix the issue by setting sections back to “relative” position and getting rid of the “top” percentage. This should fix the appearance issue from your screenshots!

You can see a screenshot here: https://cl.ly/0b3X1T122l1

For more information, you can also learn about positioning from CSS Layout and Positioning videos at Webflow University!


#5

Hello @Andrew,

Thank you very much for looking into this. The link you sent me is not working, for some reason…

Thank you for pointing towards a solution, and I am sure that I could get it to work if I toyed with it a while.
But the problem is, It was working fine before, and I didn’t change anything, so could you explain why it suddenly started appearing that way?
I would rather not have to restructure everything if I don’t have to, as this could mean a lot of fiddling.

I find it most strange that the site started appearing this way in all the archived versions as well, as it was certainly not that way when I was building it, so I can’t even restore it to a previous version.

I realise the structure of my page may not have been entirely ‘correct’ according to css principles, but part of the whole point of building websites without code is that people are willing to approach it as a visual medium it without having prior knowledge of proper structures.
My site looked and behaved exactly how I wanted it to for quite a long time, so it’s really important for me to know what happened, because that will affect the way that I use in webflow in the future.

Please offer an explanation if you can.


#7

Hello @milkshaken! I understand your concerns, and website stability is one way our Community depends on our team. We are always working to improve the Webflow Designer to realistically display how elements should behave on the web, and it seems like some of the CSS styles were affecting the ability to scroll down on the canvas.

Webflow does provide granular control over many facets of web design, and it’s part of what makes the Designer so powerful. Instead of a template that you can barely customize, Webflow gives you much more control and flexibility. I would highly encourage you to explore learning about a few web design principles (in less than 7 minutes of video) as they may help tremendously for your future design work.

Our mission here at Webflow is to empower everyone to use the Web, and we completely understand that web design should be a visual medium (unfettered by programming knowledge). We’re working hard to make this happen, because we 100% agree with your sentiment.

Every member of our team is dedicated to this mission, and we’re working as hard as we can to make this future your current reality. You can find us answering questions on the Community Forum, leading live workshops every Tuesday on YouTube, or answering questions from our contact page.

Please don’t hesistate to reach out to us for further help, because our team would love to see more of your design work and help you along the way!

P.S. I’m sorry about the first link! Here is a new screenshot highlighting the CSS styles to change: https://cl.ly/0b3X1T122l1K.


#8

Hi @Andrew,

Thank you for your response.
It seems you have misunderstood my issue.
In your screenshot, you have shown me how to space out the text in one of the sections, but the obscurity was actually an intentional design element there, so never mind that…:upside_down_face:
The text is simply meant to expand on hover.

Actually, the problem is that, there is a photo slider further down on the page, as well as a section with some contact information.
Please compare the published version of the site to the Designer version, you will see that half the content is missing from the Designer.
Namely, sections called SECTION 03 and SECTION 06 on the homepage are not to be found in the Designer.
You can refer to my previous message for the read-only link and screenshots, and let me know if the explanation makes sense.
If not, please give me some advice about specifically what to refer to to make myself understood better…

I understand that even Webflow is a work in progress, and it is a product that I absolutely love! But I need a more specific explanation as to why this could have suddenly happened, as I did not change anything in my site, at least that I am aware of.

It is fine for the moment, because my published site is still working, but if I needed to add content to my homepage right now this would be quite a big issue.


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.


#11

Hi @milkshaken!

Thank you for reaching out, and for your patience. I see that SECTION 03 and SECTION 06 are not visible from the Designer. It looks like the way the CSS is setup, they are hidden due to positioning and layout principles.

This is certainly not your fault. Browsers and CSS standards change over time, and at looks like those changes are affecting the layout and positioning of elements on the Webflow Canvas. The Webflow Canvas inside of the Designer is built to respond to CSS, HTML, and Javascript as realistically as possible, and within the window it looks like the use of absolute positioning and 200% height on certain elements is obscuring placement.

For example, on SECTION 03, following the guidelines outlined in the Webflow University Layout and Positioning tutorials, we want to select relative, not absolute positioning. And we’re going to change the heigh to auto: https://cl.ly/371p0n1Q1O0o

For the Slider element inside SECTION 03, we will also want to set the heigh to auto. https://cl.ly/2v0c2M2w3C1m

Finally, in the IMAGE DIV BLOCK you will need to add a percentage for the padding to responsively show the background image. https://cl.ly/2o3s193V1z0D

Your website is wonderfully unique. It’s wonderful, but sometimes inconvenient that web standards for styling and display change over time, but we always try to empower our users to use best practices. I would highly recommend viewing the Layout and Positioning Videos at Webflow University. They can save your hours of time as you create unique layouts for different viewing screens.