Google form not responsive on mobile on my site

Site URL: https://hannahmindfulmoney.squarespace.com/

Hi, 

On the site https://hannahmindfulmoney.squarespace.com/ password: hannahmindfulmoney I have embedded a code block with a google form but when I go on mobile its not responsive and is over flowing into the X axis which I have hidden. Do I need to ask the client to change the pixel ratio? Or is it a coding issue?

Thanks! 

when you've embedded it, you've specified the width of the iframe to be 700 pixels. find the bit that says width="700" change that to width="100%" and you should be fine.

The code block does have a bit of padding on it which you probably don't want in your mobile version as this will probably upset the way the form fills the width, so you might also want to add this code to your code block (put it above the iframe bit and you'll be fine, if not add it to the custom css part of your site from the main Design menu without the style tags around it).

<style>
  @media screen and (max-width: 767px) {
    #block-yui_3_17_2_1_1628417923165_5434 {
      padding:0;
    }
  }
</style>

@iamdavehart thankyou so much! 

On 8/8/2021 at 2:19 PM, iamdavehart said:

when you've embedded it, you've specified the width of the iframe to be 700 pixels. find the bit that says width="700" change that to width="100%" and you should be fine.

The code block does have a bit of padding on it which you probably don't want in your mobile version as this will probably upset the way the form fills the width, so you might also want to add this code to your code block (put it above the iframe bit and you'll be fine, if not add it to the custom css part of your site from the main Design menu without the style tags around it).

<style>
  @media screen and (max-width: 767px) {
    #block-yui_3_17_2_1_1628417923165_5434 {
      padding:0;
    }
  }
</style>

 

Thanks for your response to this. I followed your instructions and while changing the width to 100% does fix the mobile issues, the desktop version is now very narrow. In added your bit of style code, but it doesn't seem to make a difference. Any help is appreciated. 

Cheers,

Jenna
www.dwellbodywork.com

16 hours ago, JennaHikes said:

Thanks for your response to this. I followed your instructions and while changing the width to 100% does fix the mobile issues, the desktop version is now very narrow. In added your bit of style code, but it doesn't seem to make a difference. Any help is appreciated. 

Cheers,

Jenna
www.dwellbodywork.com

Which page are you referring to? I don't see it on homepage

Hi, here's the solution. 

Delete default width and height in the iframe code. Assign a class like .responsive-iframe

Then, add the following CSS:

.responsive-iframe {

width:100vw; 

height:100vh;

}

100vw; That will take 100 porcent of the viewport width

100vh: same but height

Hope it helped :)

@ferdanmena would you be open to providing more guidance on this?

My Google Form iframe code...

<iframe src="(googleformlink)/viewform?embedded=true" width="640" height="1947" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

If I delete the width and height...

<iframe src="(googleformlink)/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

Which leaves two questions...

1. How would assign the responsive iframe class?

2. Using the Squarespace code block it has HTML and CSS options, but it appears you can't use both. Does your code above for the responsive iframe class work in the HTML container?

Sincere thanks!

On 4/16/2024 at 11:08 PM, mrjoelcarter said:

@ferdanmena would you be open to providing more guidance on this?

 

My Google Form iframe code...

<iframe src="(googleformlink)/viewform?embedded=true" width="640" height="1947" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

If I delete the width and height...

<iframe src="(googleformlink)/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

Which leaves two questions...

1. How would assign the responsive iframe class?

2. Using the Squarespace code block it has HTML and CSS options, but it appears you can't use both. Does your code above for the responsive iframe class work in the HTML container?

Sincere thanks!

 

Try use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
	iframe[src*="viewform"] {
		width: 100% !important;
}
}