What is mobile-responsive design?

Qwilr automatically arranges your Pages so they look beautiful on any sized screen. Here's a quick guide to how that works.

All of Qwilr's design tools are based around flexibility. If your clients view your page on a mobile phone, Qwilr scales the content to keep it easy to read, whilst keeping it visually appealing and, well - beautiful! 

A PDF, on the other hand, just shrinks to fit a small screen, and sometimes doesn't even do that, so your clients have to zoom in. 

So how does Qwilr shift your page for mobile viewing? Read on...


Splash images will re-crop

Splash Blocks have background images that stretch across the whole page. But these blocks are designed for flexibility.

All Splash images will crop in from the sides on smaller and mobile screens. Here's an example:

It's best to use a flexible image that can accommodate this automatic cropping. Keep the most important part of the image in the center, and it will stay visible on most screens.

Don't want your page to change the image size? Easy - you can always add it as an inline image which keeps 100% of your images. 


Side areas of the page are flexible

As you view your page on a large desktop monitor, you'll see what looks like empty areas at the sides. Keep in mind that these areas will crop out on smaller screens. 

The content of your page lives in the center area, so it's readable on all screens.


Using 2-column sections?

Qwilr makes it easy to place text and images side by side, using our 2-column widget.

On a phone screen, the columns will stack on top of one another, to keep everything easy to read.


Using video in your Splash Blocks?

If you use a video background in any Splash Block, that's a great way to add movement to your page on desktop screens.

On mobile devices, however, Qwilr will instead display the thumbnail image from the video. The reason we do this is that streaming video consumes data on your client's mobile plan. We don't want to do that without their consent. So our mobile design reverts to the thumbnail image.

You can add a custom thumbnail to your video on YouTube.


How to preview the mobile version of your page

You can preview the mobile view at any time with your browser's Inspect tool. If you need help with this, please reach out to our team.


Did this answer your question? Got Feedback? Let us know by emailing help@qwilr.com!! 

Still need help? Contact Us Contact Us