Why won't a site load in the preview?

When a frame stays blank or keeps spinning, the cause is almost always on the website's side. Here's how to tell which one it is.

1. The site blocks embedding

AKCLNT Responsive Checker shows sites inside <iframe> elements, exactly like the device modes in browser DevTools but side by side. Sites can tell browsers not to allow that with one of two response headers:

X-Frame-Options: DENY            # or SAMEORIGIN
Content-Security-Policy: frame-ancestors 'self'

This is a deliberate security feature that protects against clickjacking. It's common on banks, social networks, email and admin dashboards. The browser obeys it, so no online checker can show those sites in a frame.

What to do as a visitor: press ▣ QR and open the site on your real phone, or open the site itself and use your browser's device mode.

2. It's your site — allow AKCLNT Responsive Checker

If you own the site and want to test it here, allow AKCLNT Responsive Checker as a frame ancestor. Keep your own domain in the list so nothing else changes.

# Nginx
add_header Content-Security-Policy "frame-ancestors 'self' https://responsive.akclnt.com" always;
# remove any:  add_header X-Frame-Options "DENY";

# Apache (.htaccess)
Header always set Content-Security-Policy "frame-ancestors 'self' https://responsive.akclnt.com"
Header always unset X-Frame-Options

// Vercel — vercel.json
{ "headers": [{ "source": "/(.*)", "headers": [
  { "key": "Content-Security-Policy", "value": "frame-ancestors 'self' https://responsive.akclnt.com" }
]}]}

// Laravel — in a middleware
$response->headers->set('Content-Security-Policy', "frame-ancestors 'self' https://responsive.akclnt.com");
$response->headers->remove('X-Frame-Options');

3. The site is HTTP only

AKCLNT Responsive Checker is served over HTTPS, and browsers block insecure http:// pages inside a secure page (mixed content). If your site has no HTTPS, the frame will be blank. Add a free certificate (Let's Encrypt, Cloudflare) — your visitors' browsers are warning them anyway.

4. Localhost URLs

localhost only exists on your computer, so expose your dev server with a tunnel and paste the HTTPS URL it gives you:

npx cloudflared tunnel --url http://localhost:3000
# or
npx localtunnel --port 3000

5. Login walls and cookies

Many browsers block third-party cookies inside frames, so pages behind a login may show the sign-in screen instead of your dashboard. Test public pages here, and use ▣ QR or a real device for logged-in flows.

Still stuck?

Use the yellow Show QR button that appears when a frame takes too long, or contact us with the URL.

FAQ

Is AKCLNT Responsive Checker broken if a frame is blank?

Usually not. Most blank frames come from the website's own security headers, X-Frame-Options or Content-Security-Policy frame-ancestors, which tell browsers not to show the site inside another page.

How can I test a site that blocks embedding?

Use the QR button to open it on your real phone, or use Chrome DevTools device mode on the site itself. If it's your site, you can allow responsive.akclnt.com in frame-ancestors.