#4 Layout with CSS

Building web layouts with CSS

Similar to adding style to an element, to change the position of an element first add a class and then edit the position properties. You’ll learn about Margin, Padding, Display, Float, Overflow, and Position. 

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
NORMAL Button
GREEN Button
RED Button
NORMAL Button
Design the buttons yourself
GREEN Button
RED Button
TIP: Select the second button and click on the [+] next to the class to add another class. You can call it “Green”. Then give it different styles. These styles will override the base styles of the first class. Then create the Red button. 
#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.