Structure
Page Structure
padding: 0 2.5rem; /* 40px */
/* Mobile */
padding: 0 1.25rem; /* 20px */
width: 100%;
max-width: 80rem; /* 1280px */
About Page Structure
Page structure refers to the barebones elements when defining the structure of a page. These classes, when placed in subsequential order from top to bottom, define structure from an elemental level all the way to section and page level.
To begin placing content on a page:
- Start with a div block with the class of page-wrapper. This houses all visible content within a page
- Place another div block with a class of main-wrapper. Set .main-wrapper as <main> tag in the element settings panel. When the <main> tag is applied, this signals to search engines that this is the main content on a page. Navigation components, such as navbars and footers are excluded from the main-wrapper div
- Define sections using the section element with a class of section-[section-name]. Replace [section-name] with a word or phrase that defines the content within the section (i.e. section-hero-header, section-news, section-faq, etc.)
- Place a div within each section with the class of page-padding. This defines horizontal padding to be used on all breakpoints
- Place a container element with the class of container inside of each page-padding block. This is the block that defines content max-width on a page
Max Widths
max-width: none;
width: 100%;
max-width: none;
width: 100%;
max-width: none;
width: 100%;
max-width: none;
max-width: 80rem; /* 1280px */
max-width: 64rem; /* 1024px */
max-width: 48rem; /* 768px */
max-width: 32rem; /* 512px */
max-width: 20rem; /* 320px */
max-width: 16rem; /* 256px */
max-width: 12rem /* 192px */
About Max Widths
Max width classes are secondary utility classes that pair with the main structure classes. These are defined within the main container element when you want elements to be smaller width than the main container. They contain max widths from 2XSmall to 2XLarge (2X Large being the same width as the container) with max-width-full with breakpoint-sepcific parameters.
Overflow
About Overflow
The overflow CSS shorthand property sets the desired behavior for an element's overflow (i.e. when an element's content is too big to fit in its block formatting context) in both directions. There are classes that match the four overflow properties.
There is no currently feasible way to define axis-dependent overflow properties (overflow-x, overflow-y) inside of Webflow without the use of custom code.
Z-Index
About Z-Index
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one. There are 6-defined layers of Z-index that go in increments of 10 starting from 0 and ending at 50. There is also a class of top for information that has the highest priority level on the page (i.e. navbars, modals, etc.)