IFRAME problem after update to v17 
Author: Bjorn Andreassen
Visited 2176,
Followers 2,
Shared 0
Width in % don't work after update to v17!
How do I fix this? I have to set width to px.
<IFRAME ..... style="width:100%">
Posted on the
Author
Here is my code.
<style>
/* On screens that are 1200px wide or less */
@media screen and (min-width: 1200px) {
.colum {
width: 60%;
}
}/* On screens that are 1024px wide or less */
@media screen and (max-width: 1024px) {
.colum {
width: 100%;
}
}
</style><div class="colum">
<iframe id="<name>" src="<link_to_page" frameborder="0" style="width:100%; height:2000px"></iframe>
</div>
Hello Bjorn.
This is most probably due to the new Grid system which now Website uses to build its own pages.
Since it now operates in a different way than before, it is possible that certain codes that used to work before no longer do now. You should try and double check your code in order to get it to work correctly with the new CSS Grid layout.
You can fix the issue by assigning a very wide pixel size to the object and then applying a max-width to it such as this -> style="max-width:100%; width:2560px;"
Alternatively, wait for other users to stop by who might have had a similar problem and already managed to solve it
Thank you for your understanding
Stefano
I'm having the same issue with all of my iFrame codes that comprise 90% of my webiste so theres no way I can work and upload with this new update until I can find a way to fix this issue. My animated tabs are not dsiplaying correctly either. Animations are merging on top of eachother and its introduced a side bar everytime it animates.
However, still would like to thank Incomedia for the update with some powerful new features like css grid which I'm sure will be awesome once I rework my V16 sites to be more compatible with it.
Author
Tell me when you find a way to fix this issue. Thx.
Hi Bjorn.
The solution to your current problem is the one I gave in my above post.
The code you need to use to make an item 100% of the width is different now, because of the Grid System.
You can fix the issue by assigning a very wide pixel size to the object and then applying a max-width to it such as this -> style="max-width:100%; width:2560px;"
Try this and let me know if you manage to fix it
Stefano
Author
Stefano: Why width:2560px?
Hi Bjorn.
It allows your object to be fully compatible with devices that measure as much as 2560px in size. Feel free to increase the size if you wish to support larger screens as well
Thank you
Stefano
I confirm this issue into 2 different pages into my project.
The first I need to to chnage a width:100% into a CSS file and to put a fixed value !!!
The second I need to change the value of width:100% into a DIV
I continue to say taht it's not normal to do these settings in a normal HTML; CC code just to be compatible with v17
Regards
https://wsx.afsoftware.fr