Does Qwilr Work on Phones and Tablets?
Qwilr automatically optimizes your Pages for any screen size. Here's a quick guide on how it works.
All of Qwilr's design tools are built to provide flexibility. If your clients view your page on a mobile phone, the content scales to keep it easy to read while remaining visually appealing and 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...
Background images will re-crop
If you have a background image that stretches across the whole page, it will crop in from the sides on smaller and mobile screens.
For example, this would be your background on an average desktop monitor:
And this is how it would look on a phone screen:
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 the Columns widget?
Qwilr makes it easy to place text and images side by side, using our Columns widget.
On a phone screen, the columns will stack on top of one another, to keep everything easy to read. You may want to test these before you send your Page out just to ensure it all looks good!
Using video in your background?
If you use a video background in any 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.
FAQ: Mobile-Responsive Layout in Qwilr
1. What does “mobile-responsive layout” mean in Qwilr?
Qwilr automatically adjusts your page to fit any screen size, whether it's a desktop, tablet, or phone, so content stays easy to read and visually appealing.
2. How are background images handled on mobile?
Background images are cropped dynamically on smaller screens. To ensure the crucial parts stay visible, center important elements. If you’d rather not have an image cropped, use an inline image, which always displays the full image.
3. What happens to page margins and side areas?
Wide screen users might see blank side margins, but those narrow toward the edges on mobile devices. The main content remains centered and readable across all screens.
4. How do columns adapt on mobile?
Layouts using the Columns widget (side-by-side text and images) will automatically stack vertically on mobile. It’s recommended to preview before sharing to ensure readability.
5. What happens to video backgrounds on mobile?
Video backgrounds are replaced with their thumbnail images on mobile to conserve user data and improve load performance. You can still set a custom thumbnail via YouTube if needed.
6. How can I preview how my page will look on mobile?
Use your phone while editing on the Qwilr page using your desktop or laptop. Also, you can use your browser’s Inspect tool to toggle mobile view and check layout adjustments like cropping, stacking, and readability.
7. Why does my text look different on mobile compared to the web version?
On mobile, text and images may stack differently or reflow to fit the smaller screen. This can sometimes make layouts look “funny” or less like the desktop version. It’s normal behavior in responsive design, and the best way to manage it is to preview your page on mobile while editing and keep layouts simple for consistency.
Did this answer your question? Got Feedback? Let us know by emailing help@qwilr.com!