Mobile Optimization: Feedback on Touch Devices
Optimize the feedback embed for mobile devices with touch-friendly buttons and responsive positioning.
The embed works on a phone without you doing anything. It works better with about twenty lines of CSS.
What you get for free
The buttons resize, taps work like clicks, the modal finds space on a small screen, and picking an element works with a finger.
Past that point it is down to your layout.
Keep the tap target at 44 pixels
Apple and Google both ask for 44 by 44 pixels as a floor. The stock buttons clear it. If you have shrunk them with your own CSS, put the size back on touch screens:
/* Ensure minimum touch target size */
.qaid-feedback-btn {
min-width: 44px;
min-height: 44px;
padding: 12px;
}
/* Add extra padding for easier tapping */
@media (pointer: coarse) {
.qaid-feedback-btn {
min-width: 48px;
min-height: 48px;
padding: 14px;
}
}pointer: coarse matches a finger rather than a mouse, so the desktop layout keeps the smaller buttons.
Sizing by screen width
Or scale them across the range:
.qaid-feedback-btn {
/* Base size for desktop */
width: 40px;
height: 40px;
font-size: 18px;
}
/* Tablet */
@media (max-width: 1024px) {
.qaid-feedback-btn {
width: 44px;
height: 44px;
font-size: 20px;
}
}
/* Mobile */
@media (max-width: 768px) {
.qaid-feedback-btn {
width: 48px;
height: 48px;
font-size: 22px;
}
}
/* Small mobile */
@media (max-width: 480px) {
.qaid-feedback-btn {
width: 52px;
height: 52px;
font-size: 24px;
}
}Moving the buttons off the address bar
A corner button on a phone sits under the address bar or the toolbar. Centre it along the bottom instead:
/* Default desktop position */
.qaid-feedback-btn {
position: fixed;
bottom: 20px;
right: 20px;
}
/* Mobile: center at bottom */
@media (max-width: 768px) {
.qaid-feedback-btn {
right: 50%;
transform: translateX(50%);
bottom: 16px;
}
}On a notched phone, lift it clear of the home indicator:
@media (max-width: 768px) {
.qaid-feedback-btn {
bottom: env(safe-area-inset-bottom, 16px);
}
}env(safe-area-inset-bottom) is zero on a phone that has no notch, so this is safe to ship everywhere.
Full-screen modal on a phone
A floating card on a 375px screen is mostly margin. Fill the screen instead:
/* Desktop modal */
.qaid-modal {
width: 400px;
max-width: 90vw;
border-radius: 12px;
}
/* Full-screen on mobile */
@media (max-width: 480px) {
.qaid-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 100%;
height: 100%;
border-radius: 0;
display: flex;
flex-direction: column;
}
.qaid-modal-content {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.qaid-modal-close {
position: absolute;
top: 12px;
right: 12px;
width: 44px;
height: 44px;
}
}Hiding it when there is no room
Some layouts have nowhere to put it. Take it out:
/* Hide on very small screens */
@media (max-width: 320px) {
.qaid-feedback-btn {
display: none;
}
}Or only in landscape, where the vertical space runs out first:
@media (max-width: 768px) and (orientation: landscape) and (max-height: 400px) {
.qaid-feedback-btn {
display: none;
}
}Or skip constructing it at all:
// Only initialize on screens wider than 320px
if (window.innerWidth > 320) {
new Qaid.QaidFeedback({
apiKey: "your-api-key"
});
}What to check
DevTools emulation is fine while you iterate, but hold a real phone before you ship. Walk the four widths that matter: 320, 375 and 428 pixels, then a tablet. Turn it sideways. Try to hit the buttons with a thumb rather than a fingertip. Scroll the page and make sure the embed does not eat the gesture. Then open the modal and let the keyboard come up, which is where most of these layouts break.
Do that in Safari on iOS and Chrome on Android at minimum. Samsung Internet and Firefox Mobile are worth a look if your analytics show them.
Video capture on a phone
Recording drains the battery and heats the device, so cap the length harder than you would on desktop:
new Qaid.QaidFeedback({
apiKey: "your-api-key",
// Shorter recordings on mobile to save battery
videoOptions: {
maxDuration: window.innerWidth < 768 ? 10 : 15
}
});Support is patchy. Chrome on Android will record with permission. Safari on iOS mostly will not, and an in-app browser inside another app usually will not either.
Lean on screenshots there instead:
/* Hide video button on mobile, emphasize screenshot */
@media (max-width: 768px) {
.qaid-video-btn {
display: none;
}
.qaid-screenshot-btn {
width: 100%;
}
}Somebody on a metered connection is paying for that upload, which is another reason to keep the limit low:
const isMobile = window.innerWidth < 768;
new Qaid.QaidFeedback({
apiKey: "your-api-key",
videoOptions: {
maxDuration: isMobile ? 15 : 30 // Shorter on mobile
}
});All of it in one stylesheet
/* Mobile-optimized feedback embed */
@media (max-width: 768px) {
/* Larger touch targets */
.qaid-feedback-btn {
min-width: 48px;
min-height: 48px;
bottom: env(safe-area-inset-bottom, 16px);
}
/* Full-screen modal */
.qaid-modal {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
max-width: 100%;
border-radius: 0;
}
/* Scrollable content */
.qaid-modal-content {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: env(safe-area-inset-bottom, 20px);
}
/* Larger form inputs */
.qaid-modal input,
.qaid-modal textarea {
font-size: 16px; /* Prevents zoom on iOS */
padding: 12px;
}
/* Larger submit button */
.qaid-modal button[type="submit"] {
min-height: 48px;
font-size: 16px;
}
}
/* Hide on very small screens */
@media (max-width: 320px) {
.qaid-feedback-btn {
display: none;
}
}
/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
.qaid-modal {
flex-direction: row;
}
}Most of the work is the tap target and the full-screen modal. The rest you can add when a real phone tells you to.