Responsive Layouts

Learn how to create responsive layouts using nested layouts and device-specific controls in Refoundry for desktop, tablet, and mobile designs.

Last updated:

Description

In this tutorial, you’ll learn how nested layouts and responsive controls can be combined to create different layouts for desktop, tablet, and mobile views.

This tutorial will cover:

  • Switching between desktop, tablet, and mobile previews
  • Using nested containers to create additional layout structure
  • Adjusting column widths to stack or rearrange content
  • Creating multi-column layouts for tablet screens
  • Controlling image and text placement within nested columns
  • Stacking columns vertically for mobile screens
  • Duplicating columns to create stacked layouts

Suggested videos:

Responsive Settings

Nested Layouts

Responsive Block Settings | Refoundry

Responsive Previews | Refoundry

Container Block | Refoundry

Row Block | Refoundry

Column Block | Refoundry

Relate Resources

Keep exploring.

Explore more resources we’ve selected to help you dig deeper into topics that matter to your workflow.

Ready to take the next step?

Put your learning into action.

Whether you’re exploring on your own or want guided support, Refoundry makes it easy to start building smarter today.