This post is the continuation of: Top 10 most frequent solutions

1. When a page is refreshed, it scrolls down to the middle of the page

It even happens when copy/pasting the URL inanother tab, or to another browser. Mystery!

It's most likely not a bug. There are two possible reasons for this behavior.

There's an anchor in the link

A previously followed link is targetting a particular section with an anchor, and the anchor remains in the URL. 

A URL with an anchor

http://yoursite.webflow.io/yourpage#anchor

An anchor in a URL targets the element in the page with the same unique ID. So every time the URL is refreshed, the page will load and immediately scrolls down to the section with the Unique ID matching the anchor in the URL.

To target a section of a page in Webflow, give the section a Unique ID in the Settings tab, then when editing the target of a link or a link block, the sections' Unique ID will appear in the Target a section part of the link settings. If you want to link a section on another pag, you have to write the URL manually and end it with #uniqueID.

There's a Form in the page, and one of its fields is set to catch the Focus

The Autofocus checkbox may be activated on a formular field. Now, when the page loads, it scrolls to the first element with an Autofocus set. 

That can be hard to realize when your form is hidden in a collapsible container.

2. Using a custom code for a HTML5 Video Background, my video doesn't fill all the width and height

Dimension properties on the custom code block element don't seem to work. The video refuses to take up all the space of its parent container.

That's because the dimensions properties need to be added to the <video> tag inside the custom code. By defining a minimum height and width of 100%, we insure that the parent container will be completely filled bythe video.

Add the following code to the <video> tag

min-weigh=100% and min-height=100% to the <video> tag code itself.

3. An old page is still online (or exported)

After having deleted a page, or change its slug (URL), the old page is still published, it can be reached with its old URL. And it's still exported when the site is exported.

The export feature exports what has been published. And the publish feature only add elements (pages...) So the deleted or unlink pages stay online, and continue to be exported.

To fix this, we can clear the published repository.

A click on the publish button then on the "Unpublish" link, will unpublish the site completely.

Then a new publish action will publish the site with only its active elements. From there, the export feature will no longer export old pages.

4. It's impossible to style the Rich Text Element

When it's not possible to style what's inside a Rich text Element (RTE), it is most likely that the RTE is linked to a Collection of the CMS. Impossible to select a sub element of the Rich Text block, like a H2 or a <p>? The RTE is in a Dynamic list, a Template page, and has a purple outline? So yes, it's linked to a collection, and can't be styled. That's normal.

To style its content, it's possible to drag a new RTE just above it or under it, oustide of a Dynamic List. It will get a blue outline. 

It need to be given the same class name as the dynamic RTE that has to be styled.

Now that it has the same class than the Dynamic RTE under it, it's possible to select a sub element of it, like a paragraph, and before styling it, tell Webflow that what need to be styled are all paragraphs inside RTEs of the same class. So we select All Paragraphs, then When nested under RTEs of the same class.

Now, when a new property is given to the paragraph of that Rich Text block, it applies to all paragraphs of Rich Text blocks of the same class.

The Rich Text Element that's been used to style the other can now be deleted.

5. An element disappears when the site is published

There's a series of social links made of link blocks and background images.

But upon publishing, they vanish.

That's because they have no dimension. They're there, but at a size of zero, so they are invisible. They have no dimension because they have no content. Content defines dimensions for an element that has none defined.

By default, Webflow element have no dimensions, but they're drawn at a default size so designers can handle them.

When elements have that gray, thick outline with a dashed stroke, it means they're still default, they will shrink to zero when published. In our case, they have a background image, but a background image doesn't give any dimension to the element on what it is set.

In order for the block to show up once the site is published, we need to give it some real content—text, or another element with dimensions—or to give it dimensions manually.

It then loses its default visual attributes and will show up exactly the same once published than it is in the designer.

6.The body copy of the blog post can't seem to be linked

Problem: Linking the title worked, but when I select my textual element in the designer, and try to link it to the blog post text, the field doesn't show up in the list.

It probably happens because the kind of elements is important when linking elements to fields in a Collection. If you have defined the body of text of your blog post as a Rich text field, as you should probably do, then this field won't show up when trying to link a collection fild on a Text element.

Neither for a Paragraph element.

‍

It will show up only for a Rich text element.

Titles, paragraphs, Text elements will only link to a text field.

Rich Text elements will only link to Rich text field.

Links and Link Blocks will only link to a link Field.

—

This post was the continuation of: Top 10 most frequent solutions

‍