How can I make embed google form responsive?

Question

I'm working on a project but don't know any backend code yet, so I'm using embed google form but that's not responsive. here's the code I tried to make that form responsive, but somehow the code doesn't work.

.contact-form {
    background-image: linear-gradient(to right, #d8d8d8, #3c557f);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 50px;
    .contact-form-conainer {
        padding: 50px !important;
        @media screen and (max-width: 768px){
            font-size: 15px !important;
            margin: 0 20px 0 20px !important;
            padding: 10px !important;
            overflow: hidden !important;
        }
        @media screen and (min-width: 576px){
            font-size: 15px !important;
            margin: 0 20px 0 20px !important;
            padding: 10px !important;
            overflow: hidden !important;
        } 
        @media screen and (max-width: 576px){
            font-size: 15px !important;
            margin: 0 20px 0 20px !important;
            padding: 10px !important;
            overflow: hidden !important;
        }
    }
}</style>


<div class="container-fluid contact-form">
        <div class="contact-form-container">
            <iframe
                src="https://docs.google.com/forms/d/e/1FAIpQLSe_ajLSx8IN9zQNS_SIwOyPV-iIMtoTj-nHOqyu5nSR10GTIQ/viewform?embedded=true"
                width="640" height="780" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
        </div>
</div>```

call as an iframe with min-width min-height then max-width max-height 100% on nested wrapper elem — Lieutenant Dan, Commented Nov 18, 2020 at 17:13

Jean Didier · Accepted Answer · 2021-06-29 09:57:28Z

8

The dirt simple solution is to set the width attribute to 100% instead of the default value 760px

answered Jun 29, 2021 at 9:57

Jean Didier

1011 silver badge5 bronze badges

Add a comment |

score -1 · Accepted Answer · 2020-11-18 17:08:52Z

-1

There are you happy YOUR HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.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;
}
</style>
</head>
<body>

<h2>Responsive Iframe</h2>
<h3>Maintain Aspect Ratio 1:1</h3>
<p>Resize the window to see the effect.</p>

<div class="container"> 
  <iframe class="responsive-iframe" src="https://www.morrmat.com"></iframe>
</div>

</body>
</html>

edited Nov 18, 2020 at 17:08

answered Nov 18, 2020 at 16:51

user14656784

don't post duplicated answers. edit your first answer instead
– Lelio Faieta
Commented Nov 18, 2020 at 17:03
What do you want
– user14656784
Commented Nov 18, 2020 at 17:07
1

I know how to make other sites embed code responsive, But I'm talking about Google form embed, that's not working in the same way as others.
– ahossainjim
Commented Nov 18, 2020 at 17:19
give me the link pelase
– user14656784
Commented Nov 18, 2020 at 17:26

Add a comment |

Collectives™ on Stack Overflow

How can I make embed google form responsive?

2 Answers 2

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related