So you’re new to Webflow, eh? Let’s dive in.

Visual Web Design Guide

This visual guide will walk you through important responsive web design concepts and how to implement them visually inside Webflow.

#5 Style Cascading

Utilizing Cascading Styles

You can easily create variations of an element by adding additional classes on top of each other and adding different styles on those classes. Check out the example below where we have different variations of a button.

Shared button styles example

Design the buttons yourself

#6 media queries

Designing for different devices

In Webflow you first design your website for desktop devices and then make changes on mobile devices (access the Device icons in the top bar). Adding styles in a mobile device will override the desktop styles.

Responsive Heading example

Fix It yourself

Responsive Button example

Button Text

Description: This button is meant to be small on Desktop screens because it’s easy to click with the mouse cursor. We made it bigger on mobile devices so that it’s easier to tap with the finger

Button Text

Fix It yourself

TIP: Go to the Tablet device and increase the padding of the button. When you do that it will override the previous styles set on Desktop and will cascade down to all the devices below Tablet.

Responsive Columns example

Description: The Columns Element in Webflow can be customized for each device. By default columns stack next to each other on Desktop and stack on top of each other on mobile devices.

Column 2

This is some text inside of a div block.

Column 3

This is some text inside of a div block.

Fix It yourself

TIP: Select a Column or Row element above (you can also use the Breadcrumb bar at the bottom or the Navigator panel on the right to find it), go to the element settings (Gear icon in the top right corner) and make sure the columns stack on mobile devices.

#7 Resources

Need more help?

You got it! There are tons of people learning Webflow and web design every day. A great place to start is the video tutorials. Then head on over to the support center or community forum.

Video Tutorials

tutorials.webflow.com

Forums

forum.webflow.com

Help Docs

help.webflow.com

(You can click on the links above by going into Preview Mode – the eye icon in the top left corner)