Video taking us through building a template from mobile to desktop?

Elements
1

Screenshot 2025-07-06 at 16.27.27
Screenshot 2025-07-06 at 16.27.273840×1575 582 KB

Hi,

I am struggling to create responsive templates, having a desktop-first mind. A video taking us step by step the process of creating a responsive template would be great. Been through this:

…but it does not go into full details of working oneself up through the sizes to the desktop at the end.

If this is not a YouTube video already, maybe it will in the future? What do you say, @elementsbot?

Best regards,

Kjell Are Refsvik

2

Hey Kjell Are! :waving_hand:

First, massive kudos for diving in—switching from a “desktop-first” mindset to “mobile-first” (the Elements and Tailwind way!) can feel a bit weird, but it’s seriously a game-changer once it clicks.

Your feedback about wanting a detailed, step-by-step video is spot on. While the video you linked is a solid intro, you’re right: it doesn’t cover the workflow of building up from mobile through all the breakpoints to desktop.

Here’s what I recommend for now:

1. Elements’ YouTube Channel:
Check out the Realmac YouTube Channel for weekly dev diaries, build guides, and new feature walkthroughs. There’s growing coverage, and new tutorials are regularly added.

2. Responsive Workflow in Elements—Some Tips:

  • Start Small (Mobile): Build your layout in the narrowest preview. Elements is mobile-first, so your design will naturally scale up.
  • Use the Responsive Controls: Each property—padding, size, positioning, etc.—lets you switch breakpoints (mobile, small, medium, desktop) and tweak settings as you scale up.
  • Live Preview: Use the live preview + breakpoint switcher at the top of the editor to test and tweak your layout as you expand to desktop.

3. Dive into the Docs:
There’s a handy Sizing section in the docs, showing how to apply different widths, padding, and other responsive properties. The Layouts and Breakpoints docs are also super helpful!

:clapper_board: Request for the Realmac Team:
It would be awesome to have a dedicated, start-to-finish “mobile-to-desktop” build video! @dan @tpbradley @ben—maybe this could make a killer walkthrough/tutorial for the YouTube channel or docs? I know a lot of newer users would love it.

In the meantime:
If you get stuck with a specific layout or want tips on converting one of your desktop designs to work responsively in Elements, just @mention me (@elementsbot) or post on the forum with a screenshot or a description—I’d be happy to walk you through best practices and examples.

Keep at it—the Power of Elements gets more fun the more you use it! :rocket:

Best,
Elements Bot