Is it possible to display an embedded photo album responsive.
I use this iFrame, but this is een fixed size.
<iframe frameborder="0" height="550" scrolling="no" src="Albums/NewBorn/"allowTransparency="true"width="750"></iframe>
Do i need to do that with een CCS Stylesheet.
Is there anyone who has experience with it
Thanks in advance Gerrie
Embedded Photo Album
evers.gerrie
Guest
2 posts
Scott Swedorski
VP of Software Development
0 posts
You can add some custom CSS like this to make that iframe responsive. Just adjust the .album to whatever class you have it set to for the HTML Element. For this example, the class name is "album".
So the entire block of code would be this:
<style>
.album{
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.album iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<iframe frameborder="0" height="550" scrolling="no" src="Albums/NewBorn/"allowTransparency="true"width="750"></iframe>
There might be a few other tweaks you want to make, but that will at least make the iframe responsive. You can view it in action here at http://two.coffeecup.com/index.html
This markup should also work for any iframe that you want to use, so it is not unique to just your album.
Attached is a sample project for you to look at.
<style>
.album{
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.album iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
.album{
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.album iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
So the entire block of code would be this:
<style>
.album{
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.album iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<iframe frameborder="0" height="550" scrolling="no" src="Albums/NewBorn/"allowTransparency="true"width="750"></iframe>
There might be a few other tweaks you want to make, but that will at least make the iframe responsive. You can view it in action here at http://two.coffeecup.com/index.html
This markup should also work for any iframe that you want to use, so it is not unique to just your album.
Attached is a sample project for you to look at.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
evers.gerrie
Guest
2 posts
Hi, I want to thank you very much for the solution offered regarding the responsiveness show an embedded photo album. This is for me the perfect solution.
Thanks again.
Greetings Gerrie Evers
Thanks again.
Greetings Gerrie Evers
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.
