Video
Transcript
Hi everyone, welcome back to the Intro to Building series. I’m Shawn, and in this lesson, we’re diving into responsive layouts within nested designs.
Responsive layouts ensure your content adjusts seamlessly across devices, from desktop to tablet to phone. For this demo, I’ll use the example we built in the last lesson and show how Refoundry’s responsive settings make it easy to fine-tune layouts for specific breakpoints without any code.
Let’s start by previewing the current layout in tablet mode. To do that, I’ll click on the tablet icon here in the editor. Right now, we’re viewing the desktop layout. Switching to tablet, you can see that the design works but starts to feel a bit cramped. For example, the side-by-side buttons don’t look great at this size.
Let’s fix the button layout. Currently, the buttons are set to display in a row, as seen here. I’ll adjust the settings specifically for tablet by switching to a column layout. This will stack the buttons vertically. By default, alignment is set to stretch, so the buttons extend across the width of the column. I can adjust this to make them their normal size if needed. I’ll also add some margin above the second button to give it more breathing room.
Next, I’ll address the overall layout. Let’s say I want the intro text and the stack of icon highlights to be arranged vertically instead of side by side. I’ll go to the column settings and set it to full width. This automatically pushes the other column to a new row since it exceeds the 12-column width. I’ll do the same for the highlights column, stretching it to full width as well. However, now the highlights feel too stretched out, so I’ll use a different approach to adjust them.
Instead of working within a single column, I’ll add a container inside the highlights column, turn off the gutter for better alignment, and add a row with columns for each highlight. This gives me the flexibility to adjust these individual elements. I’ll duplicate these columns to replicate the highlights and switch back to tablet view to refine the layout further.
For tablet, I’ll set each highlight column to a width of four, creating a neat three-column layout. I’ll also re-enable the gutter to maintain spacing between the columns. If I want the icon and text in each highlight to stack for better visibility, I can adjust the individual columns, setting the text column to full width so it moves beneath the icon. This approach keeps the design clean and readable on tablet.
Now, let’s move to phone view. In this case, I want the buttons to remain stacked, so I’ll set them back to a column layout and add some margin to keep them spaced. For the highlights, I’ll stretch each column to full width, ensuring the layout adapts perfectly to the smaller screen size.
By making these adjustments, I’ve created a fully responsive design that works beautifully on desktop, tablet, and phone. With Refoundry’s device-specific settings, you can adapt your designs to any screen size while keeping them clean and consistent—all without needing to use any code.
If you have any questions or want to learn more, visit our website or book a demo. Happy building, and see you in the next lesson!