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

TL;DR

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 data-w-id="e489a829-9b60-bf37-7d09-5cf3e1eb32c4" 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/create-zoom-in-effect-image-container-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I create a zoom-in effect on an image inside a container using Webflow? I've tried using columns, an image, and a div with the parent set to "overflow: hidden" but the animation still isn't working. Can someone please guide me on where I might be going wrong?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/fix-code-export-option-after-upgrading-webflow-plan" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I fix the code export option looking like the one from the free plan after upgrading my Webflow plan?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/create-hero-animation-like-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I create a hero animation like the one on Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/achieve-better-performance-webflow-website-mobile-devices" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I achieve better performance for my Webflow website on mobile devices, as it currently has a low score on mobile performance tests compared to desktop performance?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/optimize-webflow-website-google-core-web-vitals-image-sizing-resources" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I optimize my Webflow website for the upcoming Google Core Web Vitals update, specifically for issues related to proper image sizing and eliminating render-blocking resources?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/fix-blurry-images-webflow-website-when-published" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I fix the issue of blurry images on my Webflow website that are fine in the designer but blurry when published?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/unable-find-specific-question-provided-prompt" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">I am unable to find a specific question in the provided prompt.</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/is-there-a-straightforward-method-to-showcase-form-submissions-for-each-paid-client-within-webflow-dashboard" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Is there a straightforward method, such as using custom code or attributes, to showcase individual form submissions for each paid client within their Webflow dashboard, considering the current setup where the form data is sent to Trello and a CMS?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-to-create-overlapping-image-div-box-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I create an overlapping image and div box in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-control-rounding-unrounding-corners-webflow-accordion-when-opens" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I control the rounding/un-rounding of corners in a Webflow accordion when it opens and closes?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-to-setup-user-signups-and-access-to-cms-collection-page-in-webflow-with-troubleshooting-loom-video" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I set up user signups and access to a CMS collection page in Webflow? There is a troubleshooting loom video provided for reference.</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/embed-mp4-video-google-drive-website-webflow-steps" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Is it possible to embed a .mp4 video from Google Drive to a website using Webflow without using YouTube, Vimeo, or similar hosting sites? If yes, what are the specific steps for doing so?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/hide-delete-collection-page-in-webflow-without-password-protection" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Can I hide or delete a collection page in Webflow without using a password protection or JavaScript redirect?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-to-create-a-row-with-5-columns-using-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I create a row with 5 columns using Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/will-multiple-clients-hosted-on-webflow-be-seen-on-the-same-shared" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Will multiple clients hosted on Webflow be seen on the same shared IP address and mixed in with other clients using the same DNS settings, if we offer client billing and host them in our account?</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><div style="display:none;opacity:0" class="contact-modal1_component"><div style="-webkit-transform:translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="contact-modal1_content-wrapper"><a data-w-id="1d0ea99e-6ff9-9768-89e3-07d429589a75" href="#" class="contact-modal1_close-button w-inline-block"><div class="icon-embed-small w-embed"><svg width="100%" height="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M24.056 23.5004L23.5004 24.056C23.1935 24.3628 22.696 24.3628 22.3892 24.056L16 17.6668L9.61078 24.056C9.30394 24.3628 8.80645 24.3628 8.49961 24.056L7.94403 23.5004C7.63719 23.1936 7.63719 22.6961 7.94403 22.3892L14.3332 16L7.94403 9.61081C7.63719 9.30397 7.63719 8.80648 7.94403 8.49964L8.49961 7.94406C8.80645 7.63721 9.30394 7.63721 9.61078 7.94406L16 14.3333L22.3892 7.94404C22.6961 7.6372 23.1935 7.6372 23.5004 7.94404L24.056 8.49963C24.3628 8.80647 24.3628 9.30395 24.056 9.61079L17.6667 16L24.056 22.3892C24.3628 22.6961 24.3628 23.1936 24.056 23.5004Z" fill="currentColor"/> </svg></div></a><div class="margin-bottom margin-large"><div class="text-align-center"><div class="max-width-large-2 align-center"><div class="margin-bottom margin-xsmall"><h2 class="heading-style-h2">Help us improve</h2></div><p class="text-size-medium-3">What's the problem with this answer? Please let us know what didn't work and we'll update this answer ASAP!</p></div></div></div><div class="contact-modal1_form-block w-form"><form id="wf-form-Answer-feedback" name="wf-form-Answer-feedback" data-name="Answer feedback" method="get" class="contact-modal1_form" data-wf-page-id="64d4092642c97b70bfb8c375" data-wf-element-id="1d0ea99e-6ff9-9768-89e3-07d429589a80"><div class="form_field-wrapper"><textarea id="Answer-message" name="Answer-message" maxlength="5000" data-name="Answer message" placeholder="Type your message..." required="" class="textarea w-input"></textarea><div class="w-embed"><input type="hidden" name="page_slug" value="css-trick-scale-iframe-specific-aspect-ratio-webflow"></div></div><input type="submit" data-wait="Please wait..." id="w-node-_1d0ea99e-6ff9-9768-89e3-07d429589a94-bfb8c375" data-w-id="1d0ea99e-6ff9-9768-89e3-07d429589a94" class="button w-button" value="Submit"/></form><div class="form_message-success-wrapper w-form-done"><div class="form_message-success"><div class="success-text">Thank you! Your submission has been received!</div></div></div><div class="form_message-error-wrapper w-form-fail"><div class="form_message-error"><div class="error-text">Oops! Something went wrong while submitting the form.</div></div></div></div></div><div data-w-id="1d0ea99e-6ff9-9768-89e3-07d429589a9d" class="contact-modal1_background-overlay"></div></div><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"><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">© 2025 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.466257ce.7c045b20e409a69c.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>