Click the W to go back to the Dashboard and create a new website!

LouKou Test Portal

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

#category
Loukou API Test

My Cup of Joe

This is a photo caption text.

Featured
Description: If you set Position to Absolute on an element, you’ll be able to position it in anywhe
Button Text
LouKou Mobile Test

My Cup of Joe

This is a photo caption for my favorite cup of Joe.

Featured
Absolute Position Example

My Cup of Joe

This is a photo caption text.

Featured
Description: If you set Position to Absolute on an element, you’ll be able to position it in anywhere inside its parent block. To choose which parent to position inside of, set the parent element’s Position to Relative. Note: When elements are absolute positioned they float above other elements.
Style It Yourself

My Cup of Joe

This is a photo caption for my favorite cup of Joe.

Featured
#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

This is some heading text that gets smaller in mobile devices.

Description: This heading is really big on the desktop, but we want it to be smaller on mobile devices. Click in the devices in the top bar to see that the text size and line height was decreased.
Fix It yourself

Make this big heading text get smaller in mobile devices.

TIP: Select this heading on the Tablet device and make the font size and line height smaller. Do the same for Phone Landscape and Phone Portrait devices. You can see that the 
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

Column 1

This is some text inside of a div block.

Column 2

This is some text inside of a div block.

Column 3

This is some text inside of a div block.
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 1

This is some text inside of a div block.

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)