Responsive design in Webflow in No-Code - Mini Project: Build & Apply

Responsive Design in Webflow

📖 Scenario: You are building a simple webpage for a local bakery. The bakery wants the page to look good on phones, tablets, and desktop computers. You will use Webflow to create a responsive design that adjusts the layout and text size depending on the screen size.

🎯 Goal: Create a responsive webpage in Webflow with a header, a main section with text and an image, and a footer. The layout and font sizes should change to fit small, medium, and large screens.

📋 What You'll Learn

Use Webflow's Designer to create the page structure with semantic sections: header, main, and footer.

Add a heading and paragraph in the main section describing the bakery.

Insert an image of a bakery product in the main section.

Use Webflow's responsive tools to adjust font sizes and layout for mobile, tablet, and desktop views.

Ensure the navigation and content are easy to read and interact with on all devices.

💡 Why This Matters

🌍 Real World

Responsive design is essential for websites today because people use many devices with different screen sizes. Webflow helps designers and developers create pages that look good everywhere without writing code.

💼 Career

Knowing how to build responsive websites in tools like Webflow is valuable for web designers, front-end developers, and digital marketers who want to create user-friendly websites quickly.

1

Create the basic page structure

In Webflow Designer, add a Header section, a Main section, and a Footer section to your page. Inside the Main section, add a Heading with the text "Welcome to Sweet Treats Bakery" and a Paragraph with the text "Freshly baked goods every day."

No-Code

Need a hint?

Use Webflow's Add panel to insert the semantic sections and text elements exactly as described.

2

Add an image of a bakery product

Inside the Main section, below the paragraph, add an Image element. Set the image source to a bakery product photo you upload or use a placeholder image URL.

No-Code

  Welcome to Sweet Treats Bakery
  Freshly baked goods every day.
  

Need a hint?

Use the Image element and set the source URL exactly as shown or upload your own image.

3

Configure responsive font sizes

Use Webflow's Style panel to set the Heading font size to 2.5rem on desktop, 2rem on tablet, and 1.5rem on mobile. Also, set the Paragraph font size to 1.25rem on desktop, 1rem on tablet, and 0.875rem on mobile.

No-Code

  Welcome to Sweet Treats Bakery
  Freshly baked goods every day.
  
  

Need a hint?

Use Webflow's device preview and Style panel to set font sizes for desktop, tablet, and mobile breakpoints.

4

Make layout responsive with Flexbox

Select the Main section and apply a Flexbox layout with row direction on desktop and column direction on tablet and mobile. This will place the text and image side by side on large screens and stacked on smaller screens.

No-Code

  Welcome to Sweet Treats Bakery
  Freshly baked goods every day.
  
  

Need a hint?

Use Webflow's Flexbox settings and responsive controls to set the direction for different device sizes.