Iframe link shows up incorrectly on iphone view


(Devon UK) #1

Hello everyone

I hope somebody will be kind enough to help me.

I am planning to develop a music library site. I am not an experienced web designer, but I have been using RapidWeaver for a couple of years and developed some good sites with the software.

I’d like to use the Jazz theme by BitThemes and I would like to use a built in llicensing solution portal called LicenseQuote. This is effectively an commerce solution, so everything is contained within the player.

LicenseQuote provide iframe embed codes to add to your web site. Everything works perfectly when viewing on desktops, iPads (portrait and landscape) and iPhone landscape, however the issue comes when trying to view my site in iphone portrait mode. The LicenseQuote player simply cuts off in the viewer.

I have created a simple one page test page here: http://s179442401.websitehome.co.uk

Any help or guidance would be fantastic ! Thanks for your time.

DevonUK


(Dylan Banks) #2

Try setting the width of the iframe to 100%.

.iframe {width:100%;} should to the trick.


(Devon UK) #3

Hi Dylan thanks so much for taking the time to reply.

Sorry to appear thick, but how do I set the iframe to 100% ? The code I have doesn’t show width as percentage, only as pixels (I think): width=“700” height=“740” frameborder=“0” scrolling=“No”

Thanks DevonUK


(Doug Bennett) #4

Try changing the width:
width=“100%”


(Devon UK) #5

Hi Doug thanks for your reply. Ok, I’ve tried changing the width to 100% and unfortunately it cuts the iframe across all formats (desktop, iPad etc).

I’m also trying the license quote store on Divi for wordpress and the iframe code works without issue and is fully responsive, so I don’t know why it’s not working on RapidWeaver.

I would prefer to develop my site on rapid weaver, but I can’t seem to get past this iframe issue.

Thanks anyway - your help has been appreciated.

DevonUK


(Doug Bennett) #6

I changed it on your test site, This is what I got.
Fullscreen:

iPad View:
2017-12-14_12-54-22

iPhone 7:

2017-12-14_12-55-03


(Devon UK) #7

Hi Doug. Thanks again for your kind reply. This is really encouraging, but how are you doing this in RapidWeaver? I’m searching all over the program and I can’t see how you’ve done this. This would be the fix for me.

Unfortunately I’m not a web designer, more a drag and drop merchant (which is why I like Rapid Weaver so much).

If you could let me know I’d be most grateful.

DevonUK


(Doug Bennett) #8

It looks like you have placed the iFrame code in an HTML stack?
The code that is in the HTML stack has a width set I just change that from the 700 to 100%.

CODE;

<iframe src="https://www.licensequote.com/pub/Funky-Walrus-Music/licensing/?lqapi=op%3Dinquiry%26action%3DLICENSE%26song%3DDeep2Deep" width="100%" height="740" frameborder="0" scrolling="No"></iframe>

SCREENSHOT:


(Devon UK) #9

Hi Doug thanks again. Yes I did this based on Dylans recommendation. When I made the change it just cuts the iframe in half.


(Doug Bennett) #10

Have you tried publishing or preview only?

I took the code I listed above and placed on an RW page. With the offroad theme it looks like this:

Double check your code. Take the code I have above and paste it in as you can see it works OK.

Your site with the code I changed:

It does break (cut off) at about 330px.


(Devon UK) #11

Hi Doug - thanks so much for your help over this issue.

I re uploaded the site and hey presto it now works on iphone view vertical ! Yay ! Thank you so much !

It now only cuts off slightly in iphone landscape view, but I can live with that for now.

Thank you so much Doug !


(system) #12

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.