Make an iframe fill the width of the banner

Site URL: https://greg-holland-2020.squarespace.com/contact

I am trying to make an iframe fill the banner so it looks more seamless...is it possible? 

https://greg-holland-2020.squarespace.com/contact
pa33word

It's on the contact page towards the bottom.

Here's hoping someone can help 🙂

Where iframe?

@Claire_auck Hi,

Not sure if this will work but try playing around with the px values for this code - No idea if it will work but let me know how you get on.

#block-yui_3_17_2_1_1583366649920_4403 {

width: 899px !important;

height: 450px !important;

}

Hey @Thurstings, thanks for your reply.
I gave it a go and it changes the width which is great. Changing the height doesn't seem to make a difference but it's a good start! 
Thanks 🙂
 

Hi @tuanphan
The iframe is the section below the map on the contact page.
Thanks!

This CSS style would make it fill everything although it could affect other blocks on the page as well. Doesn't hurt to try I guess though.

Make sure to just embed on the specific page where it is needed.

div#block-yui_3_17_2_1_1583366649920_4403 {
    width: 100% !important;
}

.Index-page-content.sqs-alternate-block-style-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

Hi @JayShops

Well aren't you clever...that worked a treat!

I will go back to the people that created it to do a couple of design cleanups and then we're good to go!

Thank you for your help 🙂
 

@JayShops
Sadly the code was messing with the rest of the site, it was a good try though! 
I will ask the developers of the iframe if they can adjust at their end.

Thanks for trying!

On 3/16/2020 at 2:44 AM, Claire_auck said:

@JayShops
Sadly the code was messing with the rest of the site, it was a good try though! 
I will ask the developers of the iframe if they can adjust at their end.

Thanks for trying!

section#new-page .Index-page-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}
div#block-yui_3_17_2_1_1583366649920_4403 {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

17 hours ago, tuanphan said:

section#new-page .Index-page-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}
div#block-yui_3_17_2_1_1583366649920_4403 {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

 

@tuanphan This works a treat....thank you soooooo much!
You have helped me out so many times, I'm super grateful....!!! 
Cheers
Claire.

@Claire_auck where are you putting these code snippets in to affect the iframe width? I've got the same issue, but I don't know how to use the solutions mentioned here. I tried doing it via page settings > advanced > inject custom code, but that doesn't seem to be the right way. In my case, the iframe I'm embedding doesn't have any of its own settings for size, so I need to find a way to fix it on the Squarespace side.

On 3/13/2021 at 6:01 AM, alanna-oc said:

@Claire_auck where are you putting these code snippets in to affect the iframe width? I've got the same issue, but I don't know how to use the solutions mentioned here. I tried doing it via page settings > advanced > inject custom code, but that doesn't seem to be the right way. In my case, the iframe I'm embedding doesn't have any of its own settings for size, so I need to find a way to fix it on the Squarespace side.

Add to Design > Custom CSS. If it still doesn't work, can you share link to page where you inserted iframe? We can help easier