Disabling Airtable's mobile interface on WordPress site

Other Questions Airtable
1

Airtable embed not working as expected on mobile

I’ve got a WordPress site with an Airtable embed. It’s great on desktop, but the mobile version is missing key features. Here’s my current embed code:

<iframe style="background: transparent; border: 1px solid #ccc;" 
        src="https://myairtable.com/embed/tableID123?view=cardView" 
        width="100%" height="600" frameborder="0">
</iframe>

How can I force the desktop version to show on mobile devices? I really need those missing features for my users. Any ideas on tweaking the code or using CSS to make this work? Thanks for any help!

2

I’ve dealt with this Airtable mobile issue before, and it can be frustrating. One approach that worked for me was using JavaScript to dynamically adjust the iframe’s src attribute based on the screen size. Here’s a snippet you could try:

window.addEventListener('resize', function() {
    var iframe = document.querySelector('iframe[src*=\"airtable.com/embed\"]');
    if (iframe) {
        if (window.innerWidth <= 768) {
            iframe.src = iframe.src.replace('view=cardView', 'view=gridView');
        } else {
            iframe.src = iframe.src.replace('view=gridView', 'view=cardView');
        }
    }
});

This script switches to the grid view on mobile, which often retains more functionality than the card view. You’ll need to add this to your WordPress theme’s JavaScript file or use a custom JS plugin. Just remember to test thoroughly, as this method can cause the embed to reload when resizing the browser window.

3

hey emma, have u tried using the viewport meta tag? it can sometimes trick mobile browsers into thinkin theyre on desktop. add this to ur section:

might help force the desktop view. lemme kno if it works!

4

I’ve encountered a similar issue with Airtable embeds on mobile. One effective workaround I’ve found is to use CSS media queries to adjust the iframe’s properties for mobile devices. Try adding this CSS to your WordPress theme or custom CSS section:

@media only screen and (max-width: 767px) {
  iframe[src*='airtable.com/embed'] {
    width: 100vw !important;
    height: 100vh !important;
    transform: scale(0.75);
    transform-origin: 0 0;
  }
}

This scales down the iframe on mobile while maintaining its aspect ratio, which often tricks Airtable into serving the desktop version. You might need to adjust the scale value to fit your specific layout. Additionally, consider setting overflow-x: hidden on the parent container to prevent horizontal scrolling.