University
Home
Search
⌘E
Dashboard
Try Webflow — it's free
Learn
Courses
Docs
Videos
Interactive Learning
Glossary
Certifications
Engage
Support
Community
Events
Forum
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
Glossary
Desktop breakpoint

Desktop breakpoint

A breakpoint, or media query, is the width at which a website’s design and layout adjust to fit screens of different sizes. When designing in Webflow, breakpoints for smaller devices inherit styles from the base (desktop) breakpoint by default. 

Breakpoints are an essential part of responsive design. You want your site to look good, whether it’s on a tablet or a 50-inch computer monitor. Webflow’s built-in responsive breakpoints make it possible to have an attractive and functional site across all devices.

In the Designer, you can switch between breakpoints using the device icons in the top bar. While screen widths define the breakpoints — 768 pixels for a tablet, for example — the icons mirror the appearance of the screen size each represents.

Webflow’s four default breakpoints are desktop, tablet, mobile landscape, and mobile portrait. You can click and drag the edge of the canvas on any breakpoint to test viewport widths beyond the defaults. Webflow offers three additional larger breakpoints that you can add from the breakpoint dropdown in the top toolbar.

Visit Webflow University to learn how to style across breakpoints or hide elements for specific device sizes. 

Relevant courses

Figma to Webflow

Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.

Web animations with After Effects & Lottie

Create animations in Adobe After Effects — the industry standard for motion graphics. Embed and animate them in your Webflow site.

Ultimate web design course

From the fundamentals to advanced topics — learn how to build sites in Webflow and become the designer you always wanted to be.

CSS layout & positioning

Dig into the world of HTML and CSS layouts — learn how they work together and get an overview of display properties like inline block and flexbox.

Welcome to Webflow

Discover what Webflow offers, how it works behind-the-scenes, and tips and tricks for starting your learning journey.

Full site build

Learn how to design and develop a CMS-driven website built around the needs of your client and their audience — and execute a successful launch.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Syntax error

→
Syntax error refers to a mistake in code that violates the programming language’s rules and prevents the code from executing correctly.

Designer

→
The main interface where you can build sites.

Cipher suite

→
A cipher suite is a collection of encryption algorithms that work together to secure a network connection.

Meta keywords

→
Meta keywords are words or phrases you can include in your web page's metadata.

Read-only link

→
A way for others to test/debug your Webflow site in the Designer without being able to save or make permanent changes.

Collection field

→
An individual field within a Collection. You'll select which fields to display in dynamic Collection lists and Collection pages.

JavaScript

→
JavaScript is a programming language web developers use to create dynamic interactions and effects for web pages and applications.

Hyperlink

→
Hyperlinks are clickable elements that allow users to navigate between web pages, documents, or other types of digital content.

Application context

→
An application context is a set of data that identifies an application’s tasks, where those tasks originate, and how those tasks are configured.

Section

→
A section is an element of design layout that divides a web page into visually distinct segments.

Head code

→
Custom code that's added just before the closing </head> tag in your site's HTML file. Learn more about custom code in head and body tags.

Parent folder

→
A parent folder is a directory containing one or more folders and files.

Checkout process

→
The checkout process in ecommerce is the process that online customers go through to complete a purchase.

Web Accessibility Initiative (WAI)

→
The Web Accessibility Initiative (WAI) is a World Wide Web Consortium (W3C) project to enhance accessibility for users with disabilities.

Webclip

→
A 256 x 256 px image associated with your website that shows up when your website link is saved to an iPhone home screen.

Save as Backup

→
The ability to manually save a version of your site that you can restore at a later date using the keyboard shortcut Command + Shift + S (on Mac) or Control + Shift + S (on Windows).‍

Breadcrumb

→
A breadcrumb, or breadcrumb trail, is a navigational element representing a user’s current location within a website's hierarchical structure.

A/B testing

→
A/B testing compares two different versions of something — like a web page or campaign — to determine which performs better.

Meta description

→
An HTML attribute you can use to give a short description of the contents of a webpage. Search engines often display this in results pages (SERPs).

Margin

→
Margins are an essential spacing element of web design, dictating the amount of whitespace between a box and its surroundings.

Content network

→
A content network is a collection of websites where advertisers can pay to display digital ads.

Display: flex

→
The most flexible display property in CSS is the aptly named display: flex, which allows you to create flexible layouts with elements that you can align and distribute vertically or horizontally.

Workspace

→
A space to hold and access sites, members, settings, and integrations. All users start with a Workspace that can become collaborative when and as needed.

Username

→
The ID used to log into your Webflow account.

Duplicate element

→
To copy an element and its content, styles, and settings.

Google Universal Analytics Tracking ID

→
A unique ID you can use to link your Google Analytics account to your Webflow site.

Adobe Fonts API token

→
An Adobe Fonts API token protects and supports your data from Adobe Fonts with other programs you may be using to personalize your website’s fonts.

Valid

→
A valid CSS pseudo-class is a keyword that enables styling HTML elements based on their state or position in the document structure or web page.

Slider

→
A slider is an interactive design element for scrolling through images, videos, and other multimedia content.

Maximum height (max height)

→
The “max-height” CSS property defines an element’s maximum height.

Encapsulation

→
Encapsulation is an object-oriented programming (OOP) process that combines functions and the data they manipulate into a single entity.

Flex-grow

→
The flex-grow CSS property defines how much an element grows relative to other flexible items inside the same flex parent.

Parent

→
The element directly above in the hierarchy tree.

Buffer

→
A buffer is a temporary storage area that holds data while transferring it between different components or systems.

Folder settings

→
Allows you to manage your folders.

Preview mode

→
A feature that allows you to see how your site would be displayed in a browser without needing to publish your site or leave the Designer.

Last updated

→
The last time someone made a change to your site.

Help text

→
Help text is a user interface design element that provides additional information or guidance to users to clarify which content should go in a given Collection field.

.htaccess

→
.htaccess is a powerful configuration file that allows you to configure and control how your website functions.

Display: none

→
Display: none is a CSS property that hides website elements. This code tells the document flow to ignore the element entirely, making it invisible.

Contextual advertising

→
Contextual advertising is a form of paid advertising that matches web content with ad intent.

Password protection

→
Password protection is a security feature restricting certain website areas to authorized users, requiring a secret phrase or key to access them.

Content-first design

→
A design approach that prioritizes content planning and production in the design process.

Link block

→
A link block operates much like a div block, an HTML element for grouping and organizing other HTML elements (like text, images, and forms) into block-level containers. But in the case of a link block, what’s inside the block becomes a link.

Subdomain

→
The part of a domain that comes before the root domain (e.g., blog.yourwebsite.com is a subdomain whereas yourwebsite.com is the root domain).

Single Instruction Single Data (SISD)

→
Single Instruction and Single Data Stream (SISD) is a computer architecture where a central processing unit (CPU) executes one instruction at a time on a single data piece.

Primitive

→
A primitive is the simplest JavaScript data type, representing fundamental values that do not encapsulate any object, method, or property.

Compile time

→
Compile time is the length of time it takes for a compiler to convert high-level code into low-level code.

Total Form Submissions

→
The amount of times a site visitor submits data using your site's form(s).

Page settings

→
You can manage your site pages within Page settings. Here, you can rename, duplicate, delete, or save pages as drafts. You can also set SEO, Open Graph, and site search settings, as well as insert custom code. Additionally, you can set RSS settings for Collection pages.

Right margin

→
Right margin is a CSS property that defines the space between the right edge of an element and its surroundings.

Sibling

→
An element that shares the same parent of another element.

Call stack

→
A call stack is an ordered list of the functions (or stack frames) a program has to execute before it returns a result.

Bottom padding

→
Bottom padding is the space between the bottom of an element and its border.

Link field

→
A link field is a form input field that enables you to add links to your designs dynamically. You can connect a link field to text links, buttons, or other link elements to turn them into active links.

Responsive design

→
Responsive web design (RWD) is a web development and design approach to create websites, applications, and user interfaces (UIs) that display and function effectively on any device or screen size.

Image

→
A Webflow element that displays graphical files on your website.

States dropdown menu

→
The dropdown menu to the right of the Selector field that allows you to access and change the styles of an element when it is hovered, pressed, or focused.

Collection URL

→
The slug that represents the parent folder for your individual Collection item URLs. For example, if you created a Collection called “Blog posts,” the URL would be website.com/blog-posts, while a Collection item URL for a blog post called “Hello world” would be website.com/blog-posts/hello-world.

Flexbox

→
Flexbox is a CSS layout mechanism that offers precise alignment and stacking control for the content inside an element.

SaaS

→
Software as a Service (SaaS) is a cloud-based approach to delivering software on a subscription basis without requiring local installation.

Call-to-action (CTA)

→
A call-to-action (CTA) is a website feature that prompts visitors to perform a specific action.

Account notifications

→
Account notifications update you about activity in your account. New notifications appear on your Webflow Dashboard after you log in.

Font weight

→
Font weight refers to the thickness or density of a typeface’s strokes.

Descriptor

→
A CSS descriptor sets specific properties and values of an at-rule (@-rule) element, dictating its appearance and behavior on a web page.

Slug

→
A slug, also known as a URL slug or a website slug, is descriptive text that appears at the end of a URL and identifies a web page.

Switch field

→
Available in CMS Collections. This field offers you a powerful filtering tool for Collection items. For example, you could create a switch labeled "Featured?" for Blog Posts, and then switch on the toggle to showcase particular posts.

Twitter button

→
A Webflow element that embeds a Twitter Follow or Tweet button into your site.

Urgency

→
Urgency is a marketing term and psychological trigger that incites potential customers and website visitors to act swiftly.

Redo

→
To move forward one step while making changes to a Webflow site.

Cookie

→
Cookies are small text files sent by a website to a user’s web browser that enhance their browsing experience by remembering site preferences and activities.

Collection

→
A content type (blog posts, recipes, etc.) represented by a group of fields you define. Once created, you can add individual Collection items.

Empty state

→
The state displayed when a Collection contains no Collection items, which gives you the opportunity to design for a situation where there's no content to display. Check out the Empty States blog for inspiration.

Document type definition (DTD)

→
A document type definition (DTD) defines the structure, validity, and attributes of standard generalized markup language (SGML) documents, such as GML, HTML, and XML.

Optimization

→
Optimization is a systematic approach to improve a website's appearance, functionality, and visual appeal to enhance the user experience, improve search engine rankings, and achieve business objectives.

Headless CMS

→
A headless content management system (CMS) separates the front-end presentation layer from the back-end management layer, allowing for more flexible content delivery.

Keyboard shortcuts

→
Keyboard shortcuts are combinations of keys on a computer keyboard that perform a specific action or command within an application or operating system.

Style panel

→
The first tab in the right-side panel that allows you to assign classes to elements and style them.

File Transfer Protocol (FTP)

→
File Transfer Protocol (FTP) allows for the transfer of files between two parties over TCP/IP-based communication channels, such as the internet.

Link

→
A link, short for hyperlink, is a clickable website element that enables navigation between different web resources.

Left To Right (LTR)

→
Left To Right (LTR) describes a text layout that starts from the left and proceeds to the right.

List item

→
A list is a Webflow element that displays multiple pieces of content in a structured, visually appealing way. The individual elements that make up the list are called list items.

Flex-align

→
A flexbox property that lets you customize the alignment behavior of flex children, based on the cross-axis of the flex container. The cross axis is the opposite of the flex-direction property, so if you set the direction to vertical, the cross axis is horizontal. Options include start, center, end, baseline, and stretch.

Control flow

→
The control flow is the order in which a computer program executes its instructions or statements, guided by control structures.

Profile settings

→
The area where you can manage your profile, email settings, and security settings.

Unpublished change

→
A change that has been made in the Webflow Editor but will not appear on the live website until it’s published. You can track any unpublished changes on the bottom right of the Editor toolbar.

Height: auto

→
The "height: auto" CSS property automatically adjusts an element’s height based on its content.

Asynchronous

→
Asynchronous programming is an approach where programs simultaneously run multiple operations independently without waiting for previous tasks to complete.

PNG (Portable Network Graphics)

→
PNG, short for Portable Network Graphics, is a lossless image format known for its transparency support and quality retention after compression.

Webflow badge

→
A visible "Made in Webflow" badge displayed in the bottom right corner of Webflow sites on Starter plans.

Certificate authority

→
A certificate authority (CA), also known as a certification authority, issues digital certificates that verify a website’s owner.

Flex-justify

→
A flexbox property that lets you customize the alignment behavior of flex children, based on the main axis of the flex container — that is, whatever you defined as the flex-direction. Options include start, center, end, baseline, and stretch.

Display: inline

→
The display: inline CSS property is a display option that controls an element’s appearance and layout.

Date/Time field

→
A field available in CMS Collections. This field lets you display a date and time in a Collection and/or Collection item.

RGB (Red-Green-Blue)

→
RGB, an acronym for Red, Green, Blue, is a color model that screen displays use to represent various colors.

Transfer site

→
You can transfer sites from one Workspace to another Workspace.

Total Site Pages

→
The amount of pages your site currently has.

SSL

→
SSL (secure socket layer) is the standard method for establishing an encrypted link between a web server and a browser.

Domain-Specific Language (DSL)

→
A Domain-Specific Language (DSL) is computer script that solves software problems in a specific domain.

Checkbox

→
Checkboxes are HTML structures that allow visitors to input data.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more