Responsive Previews

Ensure your site looks great on any device with responsive previews, adjusting layouts for desktop, tablet, and mobile using Gutenberg’s flexible settings.

Last updated:

Table of contents

Video

Transcript

Hi everybody, Shawn here again from Refoundry. Welcome back to our Getting Started series. In this lesson, we’ll focus on responsive previews, an essential part of ensuring your site looks great on any device.

We’ll walk through how to preview your content across desktop, tablet, and mobile views, and how to make adjustments using responsive settings where needed.

Let’s dive right in!

At the top-right corner of the editor, you’ll see the Preview button. Clicking on this gives you options to view your layout on desktop, tablet, or mobile. Let’s start by switching to the tablet view.

Notice that the narrower width of the column we set earlier doesn’t look quite right on tablet. To fix this, we’ll set it to six columns wide for tablet only.

Throughout Refoundry, you’ll see a responsive icon next to many settings. This icon indicates that any adjustments made are device-specific. In this case, I can adjust the column width for tablets without affecting other views. I’ll click the tablet icon and set the column to six units wide.

Next, let’s check the mobile view. Clicking the Preview button again, I’ll select mobile. You can see that the content looks too cramped on this view. To fix this, we need to stack the columns vertically by setting each one to twelve columns wide (full width).

First, I’ll select the first column block and set its width to twelve units. Now, I’ll do the same for the second column block. With both columns set to full width, they now stack neatly on top of each other.

We can also adjust spacing between blocks specifically for mobile. There’s not much space between the heading and image here, so I’ll expand the spacing for the heading block. Since the responsive icon is present, this change will apply only to the mobile view.

Now that our content is stacked, let’s align it to the center for mobile. For heading and paragraph blocks, alignment options are also responsive. I’ll set both to center-align for mobile. These blocks will remain left-aligned on desktop and tablet views, but centered on mobile.

What about the button? Since it’s a block object, it doesn’t have its own alignment controls. To center it, we can use the Flexbox controls on the wrapping column block. I’ll set the column alignment to center, and now the button aligns perfectly.

And that’s it for this lesson! We’ve explored responsive previews, adjusted layouts for desktop, tablet, and mobile, and used device-specific settings to fine-tune our design. If you have any questions, feel free to reach out through our website or book a demo. Thanks for watching, and I’ll see you in the next video!

Related
Resources

Find more support docs in this specific category, or just level up your Refoundry knowledge with deeper reading.

All Support Resources

Try Now for Free

Not yet a Refoundry client? Download the plugin and get started building better sites today!

Get Refoundry

Contact Support

Can’t find what you’re looking for? Reach out any time, and one of our real humans will respond.

Contact Support