Your visitors use different devices to browse your website. Someone might discover your page on their phone, revisit it on a tablet, and explore it in detail on a desktop. Responsive design means your content automatically adapts to look great on every screen size, without you building separate versions of each page. Giant Context's visual builder gives you full control over how your pages appear across devices.

Device Preview Modes

Design Tip

Use this constantly as you build. A layout that looks balanced on desktop might feel cramped on a phone.

Column widths and responsiveness

Sections in the visual builder use a flexible 12-column grid system to structure your layout. This means a column set to a width of 6 takes up exactly half the screen, while a width of 4 takes up a third. Because these column widths are fully responsive, you can set different values for each device. For example, a feature grid might use three columns on a desktop, switch to two columns on a tablet, and stack into a single column on mobile devices.

Side-by-side content that works on a wide screen becomes unreadable when squeezed into a phone-width column. Stacking columns on smaller screens keeps your content comfortable and readable.

To adjust column widths, select a column in the editor. Width supports responsive values, allowing you to tailor the layout for any screen size. Click the device icon next to the width field to switch between breakpoints.

Visual builder settings panel showing responsive column width slider and device breakpoint icons

Fine-Tune Layouts for Every Screen

Adjust column widths, margins, and padding independently for desktop, tablet, and mobile. Simply click the device icon next to any responsive field to set a breakpoint-specific value. Your settings automatically cascade down, ensuring a perfect fit on any device.

Hiding blocks per device

Sometimes, the most effective responsive strategy is simply hiding an element on smaller screens. For example, you might want to hide a large decorative image on mobile devices to save valuable screen space and keep the focus on your core message. Every block includes responsive visibility controls to handle this. You can find these settings in the Advanced Styles panel under the Responsive section, allowing you to toggle visibility for desktop, tablet, or mobile independently.

Advanced Styles panel showing responsive visibility toggles for desktop, tablet, and mobile.

Control Visibility Across Devices

Not every block belongs on every screen. Use the Advanced Styles panel to selectively hide content on desktop, tablet, or mobile. This keeps your layouts clean and focused, ensuring visitors only see what matters most on their current device.

Optimize Headings for Every Screen

A descriptive heading that works perfectly on desktop might wrap awkwardly on a phone. To fix this, create two separate heading blocks: a detailed version for desktop and a punchy, concise version for mobile. Then, adjust the visibility settings to hide the desktop heading on smaller screens and the mobile heading on larger ones.

Testing your pages across devices

Common responsive patterns

Tips for mobile-first thinking

Mobile Traffic Matters

More than half of all web traffic comes from mobile devices. Keep your text concise and always test your layouts with real content rather than placeholders to ensure a seamless experience on smaller screens.

Troubleshooting & Common Questions

Troubleshooting Responsive Design

Check the Advanced Styles panel for the specific block. You can control visibility across different devices, so the block may have been hidden on the mobile breakpoint.

Switch to the tablet or mobile device mode in the toolbar. From there, you can adjust responsive values like margin, padding, and width in the Advanced Styles panel. Because values cascade down, changes made on smaller breakpoints won't affect your desktop layout.

Column counts are set per device. Switch to the mobile preview mode and adjust the column settings to ensure they stack vertically—such as displaying one column on mobile—rather than forcing them side-by-side.

Tip: Test with Quick View

Toggle Quick View mode to hide selection outlines and editing controls. This lets you see the final responsive result exactly as your visitors will experience it, without leaving the builder.

Built byHuman

This content was designed and written by a human.

Responsive Design