Iframe not staying contained in page

Solved
Tourist
4 0 1

Hey Shopify Community!

I have a Shopify Store that I created to help a little dude who has just been diagnosed with Duchenne Muscular Dystrophy. What I am trying to do is, I am trying to embed the code which was given to me by the donation site (Givealittle) so that it can show visitors a live view of how much has been donated. I have no issues at all embeding the code using the theme editor within the Boundless theme, however it goes over the page to the right when viewing on a mobile device, viewing from PC or Mac looks perfect!

Here is a screenshot when I had the embedded widget in the footer of the page (See how it goes to the right and doesn't stay contained inside the website?

 

Screenshot_20190824-144226.jpg

 

This is the code that I have been given

 

 

<iframe height="200" width="650" src="https://givealittle.co.nz/widget/dark-starbuck/cause/letshelpsonny" frameborder="0" seamless="seamless"></iframe><p style="font-size: x-small;">Donate via <a href="https://givealittle.co.nz" target="_blank">Givealittle</a></p>

The website is letshelpsonny.com

 

I just need some advice on how to keep it within the boarders of the website. The code I was given is available here.
Thanks in advance for your help with this great cause!


Hemi

 

0 Likes
Excursionist
47 5 6

Replace the original iframe with this one here i have added some inline styles to keep it responsive.

<iframe height="200" width="650" src="https://givealittle.co.nz/widget/dark-starbuck/cause/letshelpsonny" frameborder="0" seamless="seamless"></iframe><p style="font-size: x-small;">Donate via <a href="https://givealittle.co.nz" target="_blank" style="max-width: 100%;">Givealittle</a></p>
H. Azzam
1 Like
Tourist
4 0 1

@H_Azzam wrote:

Replace the original iframe with this one here i have added some inline styles to keep it responsive.

<iframe height="200" width="650" src="https://givealittle.co.nz/widget/dark-starbuck/cause/letshelpsonny" frameborder="0" seamless="seamless"></iframe><p style="font-size: x-small;">Donate via <a href="https://givealittle.co.nz" target="_blank" style="max-width: 100%;">Givealittle</a></p>

Hey H_Azzam!

Thanks so much for replying to me, but I am still getting the same issue. I am not sure if you pasted the correct code - that looks to be exactly the same?

EDIT: Nope, I see you have added the max width - it is still going outside the page for me though :( 
Screenshot_20190824-164354.jpg
Thanks for your help! 

0 Likes
Tourist
4 0 1

This is a better screenshot to explain what I mean when I say it goes over the page. The box should be contained within the white of the website.

 

Screenshot_20190824-165428.jpg

0 Likes

Success.

Excursionist
47 5 6

Ya sorry about that

try this one.

<iframe height="200" width="650" style="max-width: 100%;" src="https://givealittle.co.nz/widget/dark-starbuck/cause/letshelpsonny" frameborder="0" seamless="seamless"></iframe><p style="font-size: x-small;">Donate via <a href="https://givealittle.co.nz" target="_blank">Givealittle</a></p>
H. Azzam
1 Like
Highlighted
Tourist
4 0 1

WAHOO! It works - thanks so much H_Azzam, thanks for helping me out with that!

1 Like
Excursionist
47 5 6

You're welcome!, glad it worked

H. Azzam
0 Likes