Shopify themes, liquid, logos, and UX
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
I've also set up some tests on a page and cannot get them to work on the iphone either
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.
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
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
it is looking good and is responsive on a mobile screen
Some times iPhone behaves like this. can you confirm on an android phone? I have seen on the Android phone it is working well.
I have had seen this problem earlier on iPhone, I don't think so there is any reliable solution.
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>
Have you used any JS library t achieve this?
Can I check your development for this? could you add me as a staff in your store?
Hi Akibhusen, thank you anyway, but I have decided not to use this flip book
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...By Jacqui Mar 10, 2023
Upskill and stand out with the new Shopify Foundations Certification programBy SarahF_Shopify Mar 6, 2023
One of the key components to running a successful online business is having clear and co...By Ollie Mar 6, 2023