Skip to main content

Recent posts

One post tagged with "responsive"

View All Tags

Responsive Google Form Embed

Lawrence Jones

If you want your Google Form to validate without any errors or warnings, you can make these changes:

  1. Add this to any CSS file that is linked in your HTML head:
.g-form-container {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 100%; /* 1:1 Aspect Ratio */
}
.responsive-iframe {
position: absolute;
top: 0; left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
  1. In your html page, replace your Google Form embed with this:
<div class="g-form-container"><iframe class="responsive-iframe" src="REPLACE_THIS_WITH_YOUR_EMBED_URL_LINK_HERE"></iframe></div>