Where can I find the CSS class "wf-section" in Webflow, as it is used in a downloaded template but not listed in any of the stylesheets?
TL;DR
- wf-section is a Webflow system class applied to
<section>elements but not visible in the Designer. - Inspect it using browser dev tools to see its default styles.
- Override its styles with custom CSS in Project Settings > Custom Code if needed.
- It ensures consistent section padding, so adjust spacing carefully when modifying it.
The wf-section class in Webflow is an automatically applied class, not one that appears in your project’s styles panel. It is added by Webflow’s core system to Sections (<section>) elements but is not explicitly defined in your custom stylesheets. While it's not listed among user-created styles, you can still interact with it in several ways.
1. Check the Webflow Designer
- Select a Section in your project and inspect its classes. The wf-section class won’t appear directly in the class list but is applied behind the scenes.
- Webflow automatically applies styling (such as default padding) to all elements with this class.
2. Inspect Using Browser Developer Tools
- Right-click on a section in your published Webflow site and choose Inspect (Chrome) or Inspect Element (Firefox).
- Look for
<section class="wf-section">. You will see Webflow’s default styles applied here.
3. Overwrite It with Custom CSS
- If you need to modify the behavior/style of wf-section, you can manually override it in Project Settings > Custom Code > Inside