FROM CACHE - en_header

Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!

responsive iframe

LennyB
Shopify Partner
14 0 1

Hello, I am trying to embed an html5 file in an iframe, in a metafield on a product page.

The file is responsive on its own, but as soon as you host on the shopify site, it loses the responsiveness.

See the 'Look inside' tab here

https://butlerdiaries.com/collections/diaries/products/childcare-centre-diary


I've also set up some tests on a page and cannot get them to work on the iphone either

https://butlerdiaries.com/pages/flipbook-test
Thanks

 

Leona

Replies 14 (14)
Akibhusen
Shopify Partner
490 82 107

Hi @LennyB,

 

Hope you are doing well.

 

can you please share some some small videos/recording of the issue? so, I can get the better idea to provide the solution.

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me, if you want to design, re-design, develop a store, or made changes to the pre-built store.
LennyB
Shopify Partner
14 0 1

Hi @Akibhusen 
I cant seem to make a video. but the iframe is
<iframe src="https://www.childcaretechtrends.com/flipbooks/ccd/index.html" width="900" height="637" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
When just the file is viewed
https://www.childcaretechtrends.com/flipbooks/ccd/index.html
it is responsive on phone (eg fills window and flips one page at a time)

but in the iframe on the shopify page - it is cut off on the phone

Ahsan_ANC
Shopify Partner
1331 238 275

it is looking good and is responsive  on a mobile screen

download (13).png

Contact for any custom design? Skype : ahsananc
> Was my reply helpful? Click Like to let me know!
> Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com
You can get a Free Shopify design error solution and page setup guide.

Shopify Partner |
LennyB
Shopify Partner
14 0 1

This is what I see on phone

95304672-BE43-44D6-97CA-97ACEE95CEEC.png

Ahsan_ANC
Shopify Partner
1331 238 275

Some times iPhone behaves like this. can you confirm on an android phone? I have seen on the Android phone it is working well. 

Contact for any custom design? Skype : ahsananc
> Was my reply helpful? Click Like to let me know!
> Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com
You can get a Free Shopify design error solution and page setup guide.

Shopify Partner |
LennyB
Shopify Partner
14 0 1

It is on a iPhone 13

Ahsan_ANC
Shopify Partner
1331 238 275

I have had seen this problem earlier on iPhone, I don't think so there is any reliable solution. 

Contact for any custom design? Skype : ahsananc
> Was my reply helpful? Click Like to let me know!
> Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com
You can get a Free Shopify design error solution and page setup guide.

Shopify Partner |
Akibhusen
Shopify Partner
490 82 107

Hi @LennyB,

 

Please try to updating your code as per below. Let me know if you still facing the same issue after updating.

<iframe src="https://www.childcaretechtrends.com/flipbooks/ccd/index.html" width="100%" height="637" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me, if you want to design, re-design, develop a store, or made changes to the pre-built store.
LennyB
Shopify Partner
14 0 1

HI @Akibhusen I'm afraid it still has the same problem

Akibhusen
Shopify Partner
490 82 107

@LennyB,

 

Have you used any JS library t achieve this?

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me, if you want to design, re-design, develop a store, or made changes to the pre-built store.
LennyB
Shopify Partner
14 0 1

Yes, I believe the flip book uses js 

Akibhusen
Shopify Partner
490 82 107

Can I check your development for this? could you add me as a staff in your store?

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me, if you want to design, re-design, develop a store, or made changes to the pre-built store.
LennyB
Shopify Partner
14 0 1

Hi Akibhusen, thank you anyway, but I have decided not to use this flip book

Akibhusen
Shopify Partner
490 82 107

Okay @LennyB 

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me, if you want to design, re-design, develop a store, or made changes to the pre-built store.