How to force desktop view of Airtable embed on mobile devices?

Other Questions Airtable
1

I’m creating a WordPress site and I’ve added an Airtable embed. It looks great on desktop, but the mobile version is missing some key features I need. Here’s my current embed code:

<iframe style="background: transparent; border: 1px solid #ccc;" 
  src="https://example-airtable-embed-url.com" 
  width="100%" height="600" frameborder="0">
</iframe>

Is there a way to make mobile users see the desktop version? The mobile view just doesn’t cut it for what I’m trying to do. Any tips on forcing the desktop view for all devices would be super helpful. Thanks!

2

hey, i’ve dealt with this before. try adding ‘viewport’ meta tag to your page’s head:

this should force desktop view on mobile. might need to tweak the width value depending on ur layout. good luck!

3

I’ve encountered this issue as well. While the viewport meta tag can work, it might affect your entire site. A more targeted approach is to modify your iframe’s CSS. Try adding this to your iframe style:

max-width: none;
width: 1024px;
transform: scale(0.95);
transform-origin: 0 0;

This will set a fixed width for the iframe and slightly scale it down to fit most mobile screens. You may need to adjust the width and scale values to suit your specific embed. Also, consider wrapping the iframe in a div with overflow-x: auto; to allow horizontal scrolling if needed. This method preserves the desktop view functionality without impacting the rest of your mobile layout.

4

I’ve actually tackled this problem on a client’s site recently. One solution that worked well was using CSS media queries to adjust the iframe’s behavior on mobile devices. Here’s what I did:

@media screen and (max-width: 768px) {
  iframe {
    width: 100vw !important;
    height: 100vh !important;
    transform: scale(0.75);
    transform-origin: 0 0;
    position: absolute;
    top: 0;
    left: 0;
  }
}

This CSS forces the iframe to take up the full viewport on mobile, then scales it down to 75% (adjust as needed). It maintains the desktop view while still being usable on smaller screens. You might need to tweak the layout around the iframe to accommodate this change. Also, consider adding some instructions for mobile users to zoom and pan if necessary.

Remember to test thoroughly across different devices and browsers to ensure it works as expected.