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

Moving your business online

A free course on how to take your business online. Serve more clients and generate more revenue in this new environment.

CSS grid in Webflow

An overview of CSS grid. Use the grid layout in Webflow to get more control over your designs and create powerful, responsive layouts — faster.

Accessibility on the web

Learn about accessibility on the web and how to create inclusive and accessible sites without writing code.

Manage dynamic content with the Webflow CMS

Learn how to create, manage, and display dynamic content across your site using the Webflow CMS.

Localize your site in Webflow

Learn how to localize a site for different languages and regions. Translate text, customize and manage content, and optimize SEO settings, so your site reaches a wider audience.

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.

Other glossary terms

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

Semantics

→
Semantics accurately represent the structure and purpose of content in computer languages, enabling web developers and programmers to ensure the written code produces an output legible to humans and machines.

Total Site Pages

→
The amount of pages your site currently has.

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).

SSL

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

Right margin

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

A/B testing

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

Micro conversion

→
Micro conversions are small but important user actions on a website that contribute to the overall conversion funnel.

Google site verification meta tag

→
Adding a Google site verification meta tag to your website's HTML code allows Google to verify that you own the site.

Paginate items

→
This checkbox allows you to enable or disable pagination on the selected Collection list.

Navbar

→
A navbar, or navigation bar, is an interactive user element with a menu or a set of links to a website’s main sections.

Sitemap URL

→
The location your sitemap is stored in relation to your site, and what’s used when submitting your sitemap to search engines.

Container

→
An element that contains content.

Language code

→
A language code is a standardized code of letters and numbers that represent different languages.

Custom font

→
A custom font is any non-system-default typeface you manually upload to your website.

Media section

→
A section of the Add panel that holds multimedia elements like images, video, and Lottie animation.

Robots.txt

→
A robots.txt file instructs search engine crawlers which webpages and sections they can or can't crawl and index.

Total Form Submissions

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

Bottom padding

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

Control flow

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

Left padding

→
Left padding is a CSS property that defines the space between an element's left border and its content.

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.

Serialization

→
Serialization is the process of converting data into an optimized format for storage, transmission, and sharing.

Height

→
Defines how tall an element can be. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

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.

ALPN

→
ALPN stands for Application-Layer Protocol Negotiation. It’s a Transport Layer Security (TLS) extension that aids client and server identification during secure data transfers.

Collection list layout

→
Lets you control how Collection items display inside a Collection list. The default layout option has each item covering the full width of the parent element. You can change this to display Collection items in 2, 3, 4, or 6 columns.

Margin

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

Call-to-action (CTA)

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

Transfer site

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

Dynamic element

→
Dynamic elements are web page components that can change based on user interaction or external factors, like a live news feed, without requiring a page refresh or reload.

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.

Comparison shopping engine

→
A comparison shopping engine (CSE) is a search engine that compares ecommerce pricing, shipping costs, and customer reviews.

Form submission

→
When someone sends data through one of your site's forms.

URL redirect

→
URL redirect, or URL forwarding, is a web server function that automatically sends users from one web address to another.

Sibling

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

Redo

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

Basic section

→
A section of the Add panel that contains the elements that act as a website's fundamental building blocks (e.g., div block, list, button, etc.).

Tabs

→
A Webflow component that displays a pane of content associated with a tab menu button.

Literal

→
In JavaScript, literals are fixed values written directly into the code.

Mobile (landscape) breakpoint

→
A Webflow canvas setting that lets you create styles for viewports with a minimum width of 480px and a maximum width of 767px. Also known as the mobile landscape media query.

Sidebar

→
A sidebar, typically positioned on the left or right side of a website or app, is a vertical component that contains supplemental information to enrich a webpage’s primary content.

Conditional

→
Conditionals, also known as conditional statements or expressions, are coding instructions that tell a program to execute an action for a certain condition.

Certified

→
A digital certificate is a data file embedded in the site that signals the site’s safety to visitors, internet service providers (ISPs), and servers.

Domain-Specific Language (DSL)

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

Height: auto

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

AJAX

→
Asynchronous JavaScript and XML (AJAX) is a web development approach that combines technologies to allow web content to update without reloading.

Content network

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

Tablet breakpoint

→
A Webflow canvas setting for creating styles that affect viewports with a minimum width of 768px and a maximum width of 990px. Also known as the tablet media query.

ASCII

→
The American Standard Code for Information Interchange (ASCII) is an encoding standard that assigns numerical values to characters and translates them into computer-readable code.

Width: auto

→
The way browsers calculate an element's width automatically where Block level elements fill the available space of its parent and Inline elements shrink to the size of its children/content.

Real-Time Streaming Protocol (RTSP)

→
Real-Time Streaming Protocol (RTSP) is a standardized network protocol for transmitting real-time multimedia data like audio and video.

Dynamic content

→
Content you create once, then publish in many different places across your website. As you update this content in the CMS, it automatically updates wherever it exists on your site, making it convenient to create and manage larger websites.

Fold

→
The fold distinguishes the visible portion of the webpage immediately visible to users without scrolling from the remaining content viewable by scrolling down.

BiDi

→
BiDi stands for bidirectional. When a document is BiDi, it supports text that reads from right to left and left to right.

Webflow branding

→
A visible “Made in Webflow” badge displayed in the bottom right corner of Webflow sites. Webflow branding also appears in the site’s HTML. Learn more about Webflow branding.

Last updated

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

Columns

→
Columns let you create sections of content that sit side by side on your website, like the columns in newspapers. You can choose how many columns you want and their widths. You can also control how they display on smaller screens — such as stacking them.

Forms section

→
A section of the Add panel that houses form elements like inputs, checkboxes, and radio buttons.

Span text

→
The span tag is used to style inline-text.

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.

Flex-direction

→
Flex-direction is a CSS property that defines the main axis and direction of flex items, dictating the arrangement of the items within a flex container.

Inline style

→
Inline style applies CSS to an individual HTML element using the "style" attribute within the HTML tag.

Webflow Editor

→
Webflow's visual content editor. You can access it through the Webflow Dashboard by clicking the “3 disclosure dots” on a site thumbnail, then clicking “Editor.” Guest editors can access it anywhere on their live site by adding ?edit after the page URL (e.g., yoursite.com/page/?edit).

End user

→
An end user is an individual or group who directly interacts with a particular product, service, or user interface (UI), such as a website or application.

Compile time

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

Collection item

→
An individual item within a Collection. For example, in a “Blog Posts” Collection, the Collection items are individual blog posts.

Flex-order

→
In CSS, flex-order is a property that allows you to manipulate the default source order of the items within a flex container. Flex-order is especially useful when you want content to display differently on mobile than on desktop.

Website name

→
A website name, or domain, is the title of a website that appears in the browser tab and search engine results.

Custom domain hosting

→
A Webflow service that lets you point a custom domain to your Webflow-hosted site.

Urgency

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

Borders

→
The CSS border property delineates an HTML element.

Text link

→
A typography element that is used to link to other pages or sections of a webpage.

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.

Utility pages

→
Utility pages are default, customizable templates for your site’s 404 page, Password page, and Search results page.

Algorithm

→
An algorithm is a set of rules or steps that help solve problems or carry out specific tasks.

Meta keywords

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

Selector state

→
A pseudo-class that allows you to change the styles of an element when it is hovered, pressed, or focused.

Form block

→
Form blocks allow you to add form elements to a website, including appointment booking, surveys, applications, polls, and contact forms.

Argument

→
An argument is an independent value a function receives to deliver a specific output.

Below the fold

→
Below the fold refers to the lower portion of a webpage that isn’t immediately visible to visitors upon loading until they scroll down.

Em

→
An em in CSS is a scalable and relative unit of measurement that defines the size of an element relative to its parent's font size.

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.

Font weight

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

Footer code

→
Footer code creates a section at the bottom of every web page that displays important information like disclaimers, copyright or contact information, and links to related documents.

Media query

→
A media query is a CSS technique that applies different styles to a website or an app based on the characteristics of the device displaying it, such as screen size, resolution, and browser viewport.

Return on investment (ROI)

→
Return on investment (ROI) is a metric evaluating the profitability or gain of a venture.

Comment

→
A comment is a text note in source code that offers context, internal information, or other guidance to any developers using it.

Element breadcrumbs

→
A navigational aid that displays in the bottom of the Webflow Designer to help you keep track of the element you're interacting with in relation to its hierarchy.

Minimized CSS

→
A method of lowering the file size of your stylesheet(s) by removing all white space from your CSS files.

Left margin

→
Left margin is a CSS property that defines the space between an element's left edge and its surroundings.

Collection limits

→
By default, Collection lists display all items in a Collection, but you can add limits to control the number of Collection items that display.

Display: inline-block

→
The display: inline-block CSS property defines an element’s appearance and behavior. CSS designers use this code to create website layouts.

Flex-basis

→
Flex-basis is a CSS property used in flexboxes that sets the initial size of a flex item before it grows or shrinks.

Authorized applications

→
Third-party applications that you've given access to your personal and/or website data.

Position section

→
A section in the Style panel that houses CSS properties related to the positioning of an element.

Certificate authority

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

Publish site

→
The act of updating your live site to reflect new design changes.

Bounding box

→
A bounding box is a rectangular border around a website element (e.g., a heading, paragraph, or image) that appears during the design process.

HyperText Markup Language (HTML)

→
A standard markup language that web browsers use to display websites.

Locked site

→
When you have more unhosted sites in your Dashboard than your Workspace plan allows, those additional sites past your limit will be “locked” until you upgrade your plan. When you upgrade, you’ll be allowed more unhosted sites (up to the limit for your Workspace plan) and will be able to access your previously locked sites.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more