Hello Webflow Forum!
I’m working on a site for a client and I have an embedded Google Form on one of the pages. On desktop, the sizing of the Google form looks pretty good with the element width set to 640 pixels. The problem is that on portrait mobile the element doesn’t fit. 640 pixels overflows on the portrait mobile breakpoint.
I am trying to use a CSS media query to adjust the element size depending on the breakpoint. Below 478 pixels I want the Google Form element to switch to 320 pixels. Can anybody tell why my CSS media query and code is not working? The custom code is in a div element with class name: aacmform
*I will also admit this is my first time using CSS Media Queries, so it’s possible I’m missing something easy with the syntax, or not setting it up correctly.
Custom Code
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSegCb_QQs5_n9jE6uxEpZbsWvrBQ9UvsYm7EeLmWzjXTaFIpA/viewform?embedded=true" width="640" height="2539" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
<style>
@media (max-width: 478px) {
.aacmform {
Width: 320px;
}
}
</style>
Here is my site Read-Only link: Webflow - AACM Website