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.

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)

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?

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

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.