adjusting iframe for mobile browsers
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.
<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)
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
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?
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?
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
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
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
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
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.
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
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the 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.