What is mobile-responsive design?
Qwilr automatically re-orients your pages so they look beautiful on any size 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.
A PDF, on the other hand, just shrinks to fit a small screen.
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.
If you need to have 100% of the image display on all screens, you can always add it as an inline image.
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 display the thumbnail image from the video instead. 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.