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