adjusting iframe for mobile browsers...

User 2796102 Photo


Registered User
35 posts

I'm looking for some help and possible solutions. I have a web site that I have set up for my clients to preview and purchase music. In a standard monitor the score looks fairly good and you can enlarge it to zoom to max size but in the mobile browser I am wanting to resize it so that it fits in the screen. The score advances automatically with the music playing. I am using an iframe with the HTML element

<iframe
frameborder="0"
width="800"
height="518"
src="gbsjukebox/amazing_grace/amazing_grace.html">
</iframe>

Here is the page https://www.lmstest.net/gbs_amazing_grace.html

Is there a way to adjust the iframe width for each breakpoint? I tried changing it but it affects the whole thing globally - meaning to say that it makes the change to all the breakpoints. Any thoughts or suggestions would be helpful.
User 2699991 Photo


Registered User
3,750 posts

If as you say any changes you make effects all breakpoints that indicates to me that you need to set your breakpoints to default mode. I suspect it's still on (disable all breakpoints)

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2699991 Photo


Registered User
3,750 posts

AHHHHHHH
framework less (ex vanilla) mobile-first or desktop down? with this framework, there isn't disable all breakpoints only default mode

xo you have created your own breakpoints?


The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2699991 Photo


Registered User
3,750 posts

try setting the width and height of the iframe height/width to "Auto" (or 100%) then set the width/height of the CONTAINER housing the iframe to the width/height you want at each of the breakpoints. (preferred option)

so at mobile for the container set to 100vw, the height as you think looks good as you move up to adjust the width accordingly

otherwise, you need to add some code to the header of the iframe

@media screen and (max-width: (????px)) {
.class name of iframe{
width: the width of the iframe you want it to be;
height: 1the height of the iframe you want it to be;
}
}


a different one for each breakpoint

if that sound like double dutch, let me know the breakpoints that you have and I will try it out and post back the code

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 122279 Photo


Senior Advisor
13,771 posts

It's desktop down, and there are at least 3 breakpoints. And the source file for the iframe (https://www.lmstest.net/gbsjukebox/amaz … grace.html) has been made with something else, and I don't know the particular player that is being used. There are loads of CSS in the source file, and also some old HTML styles. I had a go at it, and I was able to make it smaller, but I couldn't get it big again (that was before I discovered it was desktop down). I added oodles of breakpoints and size calculations, but I actually got nowhere like what it should have been.
I guess the size 800x518 should have been set already in the source file, but it has a different size there, and to make it worse still, everything has IDs, which override classes, and position absolute and such. Since I cannot access the source file, there is not much I can do.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.