Can I force desktop view for embedded Airtable on WordPress site?

Other Questions Airtable
1

Hey everyone! I’m working on a WordPress site and I’ve got an Airtable embedded in it. The desktop version works great, but the mobile view is missing some crucial features I need. Is there a way to make mobile devices show the desktop version instead? I’ve tried messing with the iframe code, but no luck so far. Here’s a similar example of what I’m working with:

<iframe style="width:100%;height:500px;background:transparent;border:1px solid #ddd;"
  src="https://myairtable.com/embed/sampleTable123?view=grid&layout=card"
  frameborder="0">
</iframe>

Any tips or tricks would be super helpful! Thanks in advance!

2

have u tried using a CSS media query to target mobile devices? something like this might work:

@media only screen and (max-width: 600px) {
iframe {
width: 100vw !important;
height: 100vh !important;
transform: scale(0.75);
transform-origin: 0 0;
}
}

it forces the iframe to be full-screen and scales it down. might help show more of the desktop view on mobile.

3

I’ve encountered a similar issue with embedded Airtables on WordPress. Unfortunately, forcing desktop view on mobile isn’t straightforward. One workaround I’ve found somewhat effective is using viewport meta tags. Try adding this to your page’s :

This tricks mobile browsers into thinking they have a wider screen. It’s not perfect, but it can help display more of the desktop layout. You might need to adjust the width value for your specific needs.

Another option is to create a custom mobile view in Airtable that includes the features you need, then use JavaScript to swap the iframe src based on screen size. It requires more setup but could provide a better user experience overall.

4

I’ve been in a similar situation with Airtable embeds, and it can be tricky. One approach that worked for me was using a combination of CSS and JavaScript. Here’s what I did:

First, I added a class to the iframe for easier targeting: