What is a CSS trick to scale an <code><iframe></code> element to a specific aspect ratio in Webflow?

To scale an `` element to a specific aspect ratio in Webflow, you can use a CSS trick called "padding-top hack". Here's how you can achieve this:</p><p>1. First, open the Webflow Designer and select the `<iframe>` element you want to scale.<br />2. In the Style panel, click on the "+" button next to the "All Properties" section to add a custom style.<br />3. Add a class to the `<iframe>` element and give it a name (e.g., "scaled-iframe").<br />4. Make sure the "Display" property of the `<iframe>` is set to "Block".<br />5. Add the following CSS code to the custom style for the "scaled-iframe" class:</p><p>```css<br />.scaled-iframe {<br />position: relative;<br />padding-top: calc((9 / 16) * 100%); /* Adjust the aspect ratio here */<br />}</p><p>.scaled-iframe iframe {<br />position: absolute;<br />top: 0;<br />left: 0;<br />width: 100%;<br />height: 100%;<br />}<br />```</p><p>6. Save the changes and publish/update your Webflow project.</p><p>Now, your `<iframe>` element will scale to the specific aspect ratio you defined.</p><p>Here's how this CSS trick works:</p><p>- The `padding-top` property is set to a percentage value, which is calculated based on the desired aspect ratio. In the example code, `(9 / 16) * 100%` sets a 16:9 aspect ratio.<br />- By setting the `<iframe>` element's position to relative, it establishes a new containing block for absolutely positioned children.<br />- The `<iframe>` element is then positioned absolutely at the top left corner of the parent container, using `top: 0;` and `left: 0;`.<br />- Finally, the `<iframe>` element's width and height are set to 100%, allowing it to occupy the entire parent container area.</p><p>With this approach, the `<iframe>` element will maintain its aspect ratio regardless of the container size, making it more responsive and adaptable to different screen sizes.</p></div></div><div class="content31_newsletter_wrapper"><div class="content31_newsletter"><div class="margin-bottom margin-small"><div class="author-bio-name_heading">Webflow Resources</div></div><a href="https://link.flowradar.com/webflow-best-templates" target="_blank" class="answers-sidebar-cta_div w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--carbon" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M26 6v4H6V6h20m0-2H6a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM10 16v10H6V16h4m0-2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V16a2 2 0 0 0-2-2zm16 2v10H16V16h10m0-2H16a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V16a2 2 0 0 0-2-2z"></path></svg></div><div>Webflow templates</div></a><a href="https://link.flowradar.com/webflow-inspiration" target="_blank" class="answers-sidebar-cta_div w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ph" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><g fill="currentColor"><path d="M208 104a79.86 79.86 0 0 1-30.59 62.92A24.29 24.29 0 0 0 168 186v6a8 8 0 0 1-8 8H96a8 8 0 0 1-8-8v-6a24.11 24.11 0 0 0-9.3-19A79.87 79.87 0 0 1 48 104.45C47.76 61.09 82.72 25 126.07 24A80 80 0 0 1 208 104Z" opacity=".2"></path><path d="M176 232a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h80a8 8 0 0 1 8 8Zm40-128a87.55 87.55 0 0 1-33.64 69.21A16.24 16.24 0 0 0 176 186v6a16 16 0 0 1-16 16H96a16 16 0 0 1-16-16v-6a16 16 0 0 0-6.23-12.66A87.59 87.59 0 0 1 40 104.5c-.26-47.67 38.26-87.35 85.88-88.5A88 88 0 0 1 216 104Zm-16 0a72 72 0 0 0-73.74-72c-39 .92-70.47 33.39-70.26 72.39a71.64 71.64 0 0 0 27.64 56.3A32 32 0 0 1 96 186v6h24v-44.69l-29.66-29.65a8 8 0 0 1 11.32-11.32L128 132.69l26.34-26.35a8 8 0 0 1 11.32 11.32L136 147.31V192h24v-6a32.12 32.12 0 0 1 12.47-25.35A71.65 71.65 0 0 0 200 104Z"></path></g></svg></div><div>Webflow inspiration</div></a></div><div class="content31_newsletter"><div class="margin-bottom margin-small"><div class="author-bio-name_heading">Rate this answer</div></div><div class="item-feedback_div"><div class="jetboost-toggle-favorite-b92e"><a href="#" class="thumbs-up-not-favorite w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--iconoir" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M16.472 20H4.1a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6h2.768a2 2 0 0 0 1.715-.971l2.71-4.517a1.631 1.631 0 0 1 2.961 1.308l-1.022 3.408a.6.6 0 0 0 .574.772h4.575a2 2 0 0 1 1.93 2.526l-1.91 7A2 2 0 0 1 16.473 20Z"></path><path stroke-linejoin="round" d="M7 20V9"></path></g></svg></div></a><a href="#" class="thumbs-up-favorited w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--iconoir" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M16.472 20H4.1a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6h2.768a2 2 0 0 0 1.715-.971l2.71-4.517a1.631 1.631 0 0 1 2.961 1.308l-1.022 3.408a.6.6 0 0 0 .574.772h4.575a2 2 0 0 1 1.93 2.526l-1.91 7A2 2 0 0 1 16.473 20Z"></path><path stroke-linejoin="round" d="M7 20V9"></path></g></svg></div></a></div><div class="jetboost-toggle-favorite-4q76"><a href="#" class="thumbs-down-not-favorite w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--iconoir" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M16.472 3.5H4.1a.6.6 0 0 0-.6.6v9.8a.6.6 0 0 0 .6.6h2.768a2 2 0 0 1 1.715.971l2.71 4.517a1.631 1.631 0 0 0 2.961-1.308l-1.022-3.408a.6.6 0 0 1 .574-.772h4.575a2 2 0 0 0 1.93-2.526l-1.91-7A2 2 0 0 0 16.473 3.5Z"></path><path stroke-linejoin="round" d="M7 14.5v-11"></path></g></svg></div></a><a href="#" class="thumbs-down-favorited w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--iconoir" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M16.472 3.5H4.1a.6.6 0 0 0-.6.6v9.8a.6.6 0 0 0 .6.6h2.768a2 2 0 0 1 1.715.971l2.71 4.517a1.631 1.631 0 0 0 2.961-1.308l-1.022-3.408a.6.6 0 0 1 .574-.772h4.575a2 2 0 0 0 1.93-2.526l-1.91-7A2 2 0 0 0 16.473 3.5Z"></path><path stroke-linejoin="round" d="M7 14.5v-11"></path></g></svg></div></a></div></div></div></div></div></div></div></div></header><section class="section_top-items"><div class="padding-global"><div class="container-large"><div class="padding-section-large"><div id="w-node-_440228f7-117e-d715-0416-8cc78dc9b51e-bfb8c375" class="margin-bottom margin-medium"><div class="blog65_heading-wrapper"><div class="blog65_heading"><div class="max-width-large-2"><div class="margin-bottom margin-xsmall"><h2 class="heading-medium">Other Webflow Questions</h2></div></div></div><div class="blog65_button-row hide-mobile-landscape hide"><a href="/tutorial/explore?integrations=integromat%7Cparabola%7Czapier" class="button-md secondary w-inline-block"><div class="text-sm-medium secondary">Explore Logic tutorials</div></a></div></div></div><div class="answers-collection_wrapper w-dyn-list"><div role="list" class="answers-collection_list w-dyn-items"><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/webflows-transition-to-no-code-platform-with-logic-flow-and-database" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">What is the current status of Webflow's transition into a no-code platform with logic flow and database integration?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/webflow-free-website-design-hosting-different-company-limitations-and-capabilities" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Can I still design my website for free on Webflow if I decide to host it with a different company? Will free users have the same design capabilities as paying members, or will there be limitations on features and functions? Can I create, design, and customize forms on Webflow, including making them functional? Is there a Spanish-speaking community where I can find training videos and get help with my questions?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/is-it-possible-to-create-a-slide-in-webflow-that-moves-from-right-to" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Is it possible to create a slide in Webflow that moves from right to left, appearing behind the navigation bar when inactive and in front of it when active using interactions or custom code?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/unlink-nav-bar-from-symbol-in-webflow-for-independent-editing" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I unlink a nav bar from a symbol in Webflow so that I can edit it independently on subsequent pages?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/web-application-apis-webflow-front-end-site-data-integration" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I connect my web application APIs to a Webflow front-end site for data integration?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/can-the-default-container-width-of-960px-in-webflow-be-changed-to-a" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Can the default container width of 960px in Webflow be changed to a different value, such as 1140px, for responsive site design?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/can-yoast-be-used-as-an-seo-plugin-on-webflow-like-it-can-be-on-wordpress" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Can Yoast be used as an SEO plugin on Webflow like it can be on Wordpress?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/fix-issue-values-textareas-multiple-lines-not-parsed-correctly-webflow-logic-posting-external-api" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/is-it-possible-to-utilize-user-submitted-input-from-a-form-in-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Is it possible to utilize user-submitted input from a form in Webflow to generate a customized message?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/webflow-page-update-ensure-scroll-always-starts-beginning" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I ensure that when updating a Webflow page, the scrolling always starts from the beginning?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/connect-vimeo-api-webflow-cms-template-display-embedded-videos" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I connect to the Vimeo API in my Webflow CMS template to display embedded videos?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/redirect-wordpress-to-non-www-version-after-switching-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I redirect my WordPress website to the non-www version after switching to Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/recurring-payments-stripe-webflow-educational-platform-monthly-subscriptions" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Is it possible to add recurring payments from Stripe to Webflow for a educational platform's monthly subscriptions?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/webflow-publish-individual-pages-for-specific-updates" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Is there a way in Webflow to publish individual pages rather than the entire site while making updates to specific pages?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/add-access-control-allow-origin-header-to-webflow-for-firefox-and-safari" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I add the 'Access-Control-Allow-Origin' header to Webflow to resolve the issue in Firefox and Safari where images are not being displayed? Is the syntax of the header supposed to be in HTML or Javascript?</div></a></div></div></div><div class="answers-collection_wrapper w-dyn-list"><div role="list" class="answers-collection_list w-dyn-items"><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/can-webflow-be-used-to-call-a-css-or-js-file-stored-on-different-server" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/webflow-youtube-component-recognize-channel-ids-instead-of-video-ids" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Can the Webflow YouTube component recognize channel IDs instead of video IDs for embedding a Live Stream?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-can-i-use-the-finsweet-script-to-manage-two-different-sliders-on" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/prevent-fullscreen-slider-pause-on-hover-link-sliders-javascript" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/fix-scroll-issue-iphone-safari-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-can-i-prevent-scroll-when-my-nav-is-open-in-webflow-using-code" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-to-add-date-filtering-to-my-list-using-finsweet-cms-filtering" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/change-language-publication-dates-webflow-cms-collection-portuguese" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/whitelist-IP-user-agent-third-party-vendor-crawl-Webflow-site" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I whitelist the IP or user agent of a third-party vendor to crawl my Webflow site for legal compliance archiving purposes?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/configure-webflow-forms-exclude-empty-unchecked-checkboxes-customize-email-text" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/dynamically-redirect-cms-created-after-form-submission-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I dynamically redirect to a CMS created after form submission in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/make-menu-close-when-link-clicked-in-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I make the menu close when a link is clicked in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-hide-no-items-found-empty-field-webflow-second-multi-image" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/implement-swipe-functionality-between-tab-panes-using-custom-code-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/add-user-input-end-redirect-url-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I add user input to the end of the redirect URL in Webflow?</div></a></div></div></div></div></div></div></section><footer class="footer5_component"><div class="page-padding"><div class="container-large"><div class="padding-vertical padding-xxlarge"><div class="padding-bottom padding-xxlarge"><div class="w-layout-grid footer5_top-wrapper"><a href="/" id="w-node-_4c56fd38-71c5-d940-a650-19ed1da6aaa9-1da6aa91" class="footer5_logo-link w-nav-brand"><img src="https://cdn.prod.website-files.com/61e46d66024d2ef28c3f257c/63abd9c7dd43e2eacc5383b2_fr-logo-new.svg" loading="lazy" alt="" class="footer_logo"/></a><div class="footer5_link-list"><div class="footer5_column-heading">Templates</div><a href="/templates-categories/cms" class="footer5_link">CMS templates</a><a href="/?free-or-paid=Free" class="footer5_link">Free templates</a><a href="/templates-categories/saas" class="footer5_link">SaaS templates</a><a href="/templates-categories/ecommerce" class="footer5_link">Ecommerce templates</a><a href="/template/explore" class="footer5_link">All Webflow templates</a></div><div class="footer5_link-list"><div class="footer5_column-heading">Cloneables</div><a href="/cloneable-categories/styleguide" class="footer5_link">Styleguides</a><a href="/cloneable-categories/accordion" class="footer5_link">Accordions</a><a href="/cloneable-categories/text-effects" class="footer5_link">Text animations</a><a href="/cloneable-categories/cms" class="footer5_link">CMS cloneables</a><a href="/cloneable/explore" class="footer5_link">All Webflow cloneables</a></div><div class="footer5_link-list"><div class="footer5_column-heading">Resources</div><a href="/inspiration" class="footer5_link w-inline-block"><div>Inspiration</div><div class="badge gray footer"><div class="text-xs-medium badge-label gray">New</div></div></a><a href="/products/webflow-domain-list" class="footer5_link w-inline-block"><div>Products</div><div class="badge gray footer"><div class="text-xs-medium badge-label gray">New</div></div></a><a href="/integration/explore" class="footer5_link">Webflow Tools</a><a href="/tutorials" class="footer5_link">Webflow Tutorials</a><a href="/expert/explore" class="footer5_link">Designers</a><a href="/webflow-checklist" class="footer5_link">Webflow checklist</a><a href="/snippet/explore" class="footer5_link w-inline-block"><div>Code snippets</div></a><a href="/webflow-keyboard-shortcuts" class="footer5_link w-inline-block"><div>Keyboard shortcuts</div></a><a href="/webflow-limitations" class="footer5_link w-inline-block"><div>Webflow limits</div></a><a href="/changes" class="footer5_link w-inline-block"><div>Changelog</div><div class="badge gray footer"><div class="text-xs-medium badge-label gray">New</div></div></a><a href="/add-resource" class="footer5_link">Add resource</a></div><div class="footer5_link-list hide"><div class="footer5_column-heading">Column Five</div><a href="#" class="footer5_link">Link Twenty One</a><a href="#" class="footer5_link">Link Twenty Two</a><a href="#" class="footer5_link">Link Twenty Three</a><a href="#" class="footer5_link">Link Twenty Four</a><a href="#" class="footer5_link">Link Twenty Five</a></div></div></div><div class="line-divider breadcrumbs"></div><div class="footer5_newsletter-wrapper"><div class="footer5_newsletter-text-wrapper"><div class="text-weight-semibold text-size-medium">Get the best of Webflow delivered weekly</div><p>Each week we send a roundup of all things Webflow</p></div><div class="footer5_form-block w-form"><form id="email-form" name="email-form" data-name="Email Form" method="get" class="footer5_form" data-wf-page-id="64d4092642c97b70bfb8c375" data-wf-element-id="4c56fd38-71c5-d940-a650-19ed1da6aa9c" data-turnstile-sitekey="0x4AAAAAAAQTptj2So4dx43e"><input class="form-input-2 w-input" maxlength="256" name="email" data-name="email" placeholder="Enter your email" type="email" id="email-6" required=""/><input type="submit" data-wait="Please wait..." class="button-xl w-button" value="Subscribe"/></form><div class="text-size-tiny">No spam, just weekly Webflow ♥ goodness.</div><div class="success-message-2 w-form-done"><div>Thank you! Your submission has been received!</div></div><div class="error-message w-form-fail"><div>Oops! Something went wrong while submitting the form.</div></div></div></div><div class="padding-top padding-medium"><div class="footer5_bottom-wrapper"><div class="w-layout-grid footer5_legal-list"><div id="w-node-_4c56fd38-71c5-d940-a650-19ed1da6aaf0-1da6aa91" class="footer5_credit-text">© 2024 FlowRadar. All right reserved.</div><a href="#" class="footer5_legal-link hide">Privacy Policy</a><a href="#" class="footer5_legal-link hide">Terms of Service</a><a href="#" class="footer5_legal-link hide">Cookies Settings</a></div><div class="w-layout-grid footer5_social-icons"><a href="https://www.facebook.com/FlowRadarcom/" target="_blank" class="footer5_social-link w-inline-block"><div class="social-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16.5 6H13.5C12.9477 6 12.5 6.44772 12.5 7V10H16.5C16.6137 9.99748 16.7216 10.0504 16.7892 10.1419C16.8568 10.2334 16.8758 10.352 16.84 10.46L16.1 12.66C16.0318 12.8619 15.8431 12.9984 15.63 13H12.5V20.5C12.5 20.7761 12.2761 21 12 21H9.5C9.22386 21 9 20.7761 9 20.5V13H7.5C7.22386 13 7 12.7761 7 12.5V10.5C7 10.2239 7.22386 10 7.5 10H9V7C9 4.79086 10.7909 3 13 3H16.5C16.7761 3 17 3.22386 17 3.5V5.5C17 5.77614 16.7761 6 16.5 6Z" fill="CurrentColor"/> </svg></div></a><a href="#" class="footer5_social-link hide w-inline-block"><div class="social-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M16 3H8C5.23858 3 3 5.23858 3 8V16C3 18.7614 5.23858 21 8 21H16C18.7614 21 21 18.7614 21 16V8C21 5.23858 18.7614 3 16 3ZM19.25 16C19.2445 17.7926 17.7926 19.2445 16 19.25H8C6.20735 19.2445 4.75549 17.7926 4.75 16V8C4.75549 6.20735 6.20735 4.75549 8 4.75H16C17.7926 4.75549 19.2445 6.20735 19.25 8V16ZM16.75 8.25C17.3023 8.25 17.75 7.80228 17.75 7.25C17.75 6.69772 17.3023 6.25 16.75 6.25C16.1977 6.25 15.75 6.69772 15.75 7.25C15.75 7.80228 16.1977 8.25 16.75 8.25ZM12 7.5C9.51472 7.5 7.5 9.51472 7.5 12C7.5 14.4853 9.51472 16.5 12 16.5C14.4853 16.5 16.5 14.4853 16.5 12C16.5027 10.8057 16.0294 9.65957 15.1849 8.81508C14.3404 7.97059 13.1943 7.49734 12 7.5ZM9.25 12C9.25 13.5188 10.4812 14.75 12 14.75C13.5188 14.75 14.75 13.5188 14.75 12C14.75 10.4812 13.5188 9.25 12 9.25C10.4812 9.25 9.25 10.4812 9.25 12Z" fill="CurrentColor"/> </svg></div></a><a href="https://twitter.com/flowradarcom" class="footer5_social-link w-inline-block"><div class="social-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.9728 6.7174C20.5084 7.33692 19.947 7.87733 19.3103 8.31776C19.3103 8.47959 19.3103 8.64142 19.3103 8.81225C19.3154 11.7511 18.1415 14.5691 16.0518 16.6345C13.962 18.6999 11.1312 19.8399 8.19405 19.7989C6.49599 19.8046 4.81967 19.4169 3.29642 18.6661C3.21428 18.6302 3.16131 18.549 3.16162 18.4593V18.3604C3.16162 18.2313 3.26623 18.1267 3.39527 18.1267C5.06442 18.0716 6.67402 17.4929 7.99634 16.4724C6.48553 16.4419 5.12619 15.5469 4.5006 14.1707C4.46901 14.0956 4.47884 14.0093 4.52657 13.9432C4.57429 13.8771 4.653 13.8407 4.73425 13.8471C5.19342 13.8932 5.65718 13.8505 6.1002 13.7212C4.43239 13.375 3.17921 11.9904 2.99986 10.2957C2.99349 10.2144 3.02992 10.1357 3.096 10.0879C3.16207 10.0402 3.24824 10.0303 3.32338 10.062C3.77094 10.2595 4.25409 10.3635 4.74324 10.3676C3.28184 9.40846 2.65061 7.58405 3.20655 5.92622C3.26394 5.76513 3.40181 5.64612 3.5695 5.61294C3.73718 5.57975 3.90996 5.63728 4.02432 5.76439C5.99639 7.86325 8.70604 9.11396 11.5819 9.25279C11.5083 8.95885 11.4721 8.65676 11.4741 8.35372C11.501 6.76472 12.4842 5.34921 13.9634 4.76987C15.4425 4.19054 17.1249 4.56203 18.223 5.71044C18.9714 5.56785 19.695 5.31645 20.3707 4.96421C20.4202 4.93331 20.483 4.93331 20.5325 4.96421C20.5634 5.01373 20.5634 5.07652 20.5325 5.12604C20.2052 5.87552 19.6523 6.50412 18.9509 6.92419C19.5651 6.85296 20.1685 6.70807 20.7482 6.49264C20.797 6.45942 20.8611 6.45942 20.9099 6.49264C20.9508 6.51134 20.9814 6.54711 20.9935 6.59042C21.0056 6.63373 20.998 6.68018 20.9728 6.7174Z" fill="CurrentColor"/> </svg></div></a><a href="#" class="footer5_social-link hide w-inline-block"><div class="social-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3ZM8 18C8.27614 18 8.5 17.7761 8.5 17.5V10.5C8.5 10.2239 8.27614 10 8 10H6.5C6.22386 10 6 10.2239 6 10.5V17.5C6 17.7761 6.22386 18 6.5 18H8ZM7.25 9C6.42157 9 5.75 8.32843 5.75 7.5C5.75 6.67157 6.42157 6 7.25 6C8.07843 6 8.75 6.67157 8.75 7.5C8.75 8.32843 8.07843 9 7.25 9ZM17.5 18C17.7761 18 18 17.7761 18 17.5V12.9C18.0325 11.3108 16.8576 9.95452 15.28 9.76C14.177 9.65925 13.1083 10.1744 12.5 11.1V10.5C12.5 10.2239 12.2761 10 12 10H10.5C10.2239 10 10 10.2239 10 10.5V17.5C10 17.7761 10.2239 18 10.5 18H12C12.2761 18 12.5 17.7761 12.5 17.5V13.75C12.5 12.9216 13.1716 12.25 14 12.25C14.8284 12.25 15.5 12.9216 15.5 13.75V17.5C15.5 17.7761 15.7239 18 16 18H17.5Z" fill="CurrentColor"/> </svg></div></a></div></div><div class="margin-top margin-small"><div class="footer-about_div"><div class="footer-about text-xs-normal">FlowRadar.com is not affiliated with Webflow. We simply ♥ <a href="https://link.flowradar.com/webflow" target="_blank" class="footer_links">Webflow</a>. This website was built in <a href="https://link.flowradar.com/webflow" target="_blank" class="footer_links">Webflow</a>, connected to <a href="https://link.flowradar.com/airtable" target="_blank" class="footer_links">Airtable</a> and <a href="https://www.flowmonk.com/?ref=flowradar" class="footer_links">real-time Airtable & Webflow syncing</a> by Flowmonk. Search & filtering powered by <a href="https://link.flowradar.com/jetboost" target="_blank" class="footer_links">Jetboost</a>. Webflow components by <a href="https://link.flowradar.com/relume" target="_blank" class="footer_links">Relume</a>. FlowRadar is reader-supported, some links may be affiliate links.</div></div></div></div></div></div></div></footer></div><script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=61e46d66024d2ef28c3f257c" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://cdn.prod.website-files.com/61e46d66024d2ef28c3f257c/js/webflow.9f568fd71.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js"></script> <script src="https://cdn.jsdelivr.net/npm/preact/dist/preact.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.5.1/dist/algoliasearch-lite.umd.js"></script> <script> const { autocomplete, getAlgoliaResults } = window['@algolia/autocomplete-js']; const appId = "0J2XGWBAEG"; const apiKey = "780ddde038795dc79d2d680bdfa1bad8"; const searchClient = algoliasearch(appId, apiKey); const { setIsOpen } = autocomplete({ container: "#autocomplete", placeholder: "Search ( ⌘ + k )", detachedMediaQuery: '', openOnFocus: true, getSources({ query, state }) { if (!query) { return []; } return [ { sourceId: "cloneables", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'cloneables', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 10 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Cloneables</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/cloneables/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/cloneables/${item.Slug}"><img src="${item['Cloneable Image']}" alt="${item.Name}" class="algolia-cloneable_image" /></a> </div> <div class="aa-ItemContentBody"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="aa-ItemContentSubtitle hide"> Published in <strong>${item["Cloneable Categories"]}</strong> </div> <div class="aa-ItemContentDescription text-style-3lines"> ${components.Snippet({ hit: item, attribute: 'Webflow Description', })} </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/cloneables/" + item.Slug; }, }, { sourceId: "templates", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'templates', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 10 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Templates</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/templates/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/templates/${item.Slug}"><img src="${item.Screenshot}" alt="${item.Name}" class="algolia-template_image" /></a> </div> <div class="aa-ItemContentBody hide"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="hide"> Published in <strong>${item["Template Categories"]}</strong> </div> <div class="aa-ItemContentDescription text-style-3lines hide"> ${components.Snippet({ hit: item, attribute: 'Description', })} </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/templates/" + item.Slug; }, }, { sourceId: "customcode", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'customcode', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 10 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Code snippets</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/custom-code/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/templates/${item.Slug}"><img src="${item['Custom code - Small']}" alt="${item.Name}" class="algolia-cloneable_image" /></a> </div> <div class="aa-ItemContentBody"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="hide"> Published in <strong>${item["Code - Categories"]}</strong> </div> <div class="aa-ItemContentDescription text-style-3lines"> ${components.Snippet({ hit: item, attribute: 'Description', })} </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/custom-code/" + item.Slug; }, }, { sourceId: "integrations", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'integrations', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 10 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Integrations</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/integrations/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/templates/${item.Slug}"><img src="${item.Logo}" alt="${item.Name}" class="algolia-cloneable_image small" /></a> </div> <div class="aa-ItemContentBody"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="hide"> Published in <strong>${item["Integration - Categories"]}</strong> </div> <div class="aa-ItemContentDescription text-style-2lines"> ${components.Snippet({ hit: item, attribute: 'Description', })} </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/integrations/" + item.Slug; }, }, { sourceId: "tutorials", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'tutorials', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 10 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Tutorials</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/tutorials/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/templates/${item.Slug}"><img src="${item['Youtube thumbnail - normal (320x180)']}" alt="${item.Name}" class="algolia-cloneable_image" /></a> </div> <div class="aa-ItemContentBody"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="hide"> Published in <strong>${item["Integrations mentioned/utilized"]}</strong> </div> <div class="aa-ItemContentDescription text-style-2lines"> ${components.Snippet({ hit: item, attribute: 'Description', })} </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/tutorials/" + item.Slug; }, }, { sourceId: "experts", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'experts', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 7 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Experts</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/experts/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/templates/${item.Slug}"><img src="${item['Profile image - Small']}" alt="${item.Name}" class="algolia-cloneable_image experts" /></a> </div> <div class="aa-ItemContentBody"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="hide"> Published in <strong>${item.Categories}</strong> </div> <div class="algolia-experts-items_div"> <div class="algolia-stats-cloneables_div"><div class="algolia-stats-icon_text"></div><div class="algolia-stats_text">${item['# of Templates']}</div></div> <div class="algolia-stats-cloneables_div"><div class="algolia-stats-icon_text"></div><div class="algolia-stats_text">${item['# of Cloneables']}</div></div> <div class="algolia-stats-cloneables_div"><div class="algolia-stats-icon_text"></div><div class="algolia-stats_text">${item['# of Tutorials']}</div></div> <div class="algolia-stats-cloneables_div"><div class="algolia-stats-icon_text"></div><div class="algolia-stats_text">${item['# of Code Snippets']}</div></div> </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/experts/" + item.Slug; }, }, ]; } }); document.addEventListener('keydown', (event) => { if (event.metaKey && event.key.toLowerCase() === 'k') { setIsOpen(true); } }); </script> <style> /* Algolia */ .aa-Source[data-autocomplete-source-id='templates'] .aa-List { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.5rem; } .aa-Source[data-autocomplete-source-id='templates'] .aa-Item { display: flex; flex-direction: column; justify-content: center; } .aa-Source[data-autocomplete-source-id='illustrations'] .aa-List { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.5rem; } .aa-Source[data-autocomplete-source-id='illustrations'] .aa-Item { display: flex; flex-direction: column; justify-content: center; } .aa-Source {margin-top: 1.5rem; margin-bottom: 1.5rem;} .aa-SourceHeaderTitle {color: hsla(271.16883116883116, 64.71%, 46.67%, 1.00); font-size: 1.15rem; font-weight: 500;} .aa-ItemContentTitle {font-size:.875rem} .aa-SourceHeader {font-size:1.125rem; font-weight:600;} .aa-DetachedSearchButton {min-width: auto; margin-right: 0; padding: 12px 16px 12px 44px; border-color: #d6d6d6; background-image: url("https://global-uploads.webflow.com/61e46d66024d2ef28c3f257c/61ec775e4501442947de4f99_search.png"); background-position: 18px 50%; background-size: 15px 15px; background-repeat: no-repeat; background-attachment: scroll; min-height: 44px; margin-bottom: 0; border: 1px solid #d0d5dd; box-shadow: 1px 1px 2px 0 rgba(16,24,40,.05); font-size: 1rem; line-height: 1.5rem; border-radius: 6px; overflow: hidden; } .aa-DetachedSearchButtonIcon {display:none;} .aa-DetachedContainer {bottom: 3%;} .aa-PanelLayout aa-Panel--scrollable {max-height: var(--aa-detached-modal-max-height);} :root { --aa-overlay-color-rgb:115,114,129; --aa-overlay-color-alpha:0.95; --aa-panel-max-height: 100% !important; --aa-detached-modal-max-height: 100% !important; } </style>  <script> // Get the thumbs-up and thumbs-down elements const thumbsUp = document.querySelector('.thumbs-up-not-favorite'); const thumbsDown = document.querySelector('.thumbs-down-not-favorite'); // Get the thumbs wrappers const thumbsUpWrapper = document.querySelector('.jetboost-toggle-favorite-b92e'); const thumbsDownWrapper = document.querySelector('.jetboost-toggle-favorite-4q76'); // Function to add or remove the disabled class based on the condition function toggleDisabledClass(element, condition) { if (condition) { element.classList.add('disabled'); element.style.pointerEvents = 'none'; } else { element.classList.remove('disabled'); element.style.pointerEvents = 'auto'; } } // Watch for changes in the class of thumbs-up const thumbsUpObserver = new MutationObserver(() => { const isHideClassAdded = thumbsUp.classList.contains('jetboost-list-item-hide'); toggleDisabledClass(thumbsUpWrapper, isHideClassAdded); }); thumbsUpObserver.observe(thumbsUp, { attributes: true }); // Watch for changes in the class of thumbs-down const thumbsDownObserver = new MutationObserver(() => { const isHideClassAdded = thumbsDown.classList.contains('jetboost-list-item-hide'); toggleDisabledClass(thumbsDownWrapper, isHideClassAdded); }); thumbsDownObserver.observe(thumbsDown, { attributes: true }); </script> </body></html>