Hello,
I use an InlineFrame on a webpage with two breakpoints and want to assign the following styles to it.
Default: transform-origin: 0 0; transform: scale(1.0);
Breakpint 800px: transform-origin: 0 0; transform: scale(2.1);
The InlineFrame should be stretched by a factor of 2.1 for viewports smaller than 800 pixels.
Stretching works so far, but I don't get it to separate the stretching for each breakpoint. The IFrame is stretched in every breakpoint by factor 2.1. I tried it with the StyleManager (created a Style with two breakpoints) and the OnLoad Event of the Page but this doesent work for me.
How can I realize that a different styles are used depending on the breakpoint?
Thank you very much for help.
Markus
Using WebBuilder 14.3.4
IFrame, separate Style in each breakpoint. How?
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.
Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.
Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Re: IFrame, separate Style in each breakpoint. How?
First note that I cannot assist you with custom code.
But if you want to apply different style for a breakpoints then you will have to add a media query to your code.
Something like:
But if you want to apply different style for a breakpoints then you will have to add a media query to your code.
Something like:
Code: Select all
@media only screen and (max-width: 800px)
{
#inlineframe
{
transform-origin: 0 0; transform: scale(2.1);
}
}
Re: IFrame, separate Style in each breakpoint. How?
Great, pablo!
Thank you very much,
I have to place the following code into the "Before Tag"-Tab of the IFrame Object and its working like a charm.
Thank you very much,
I have to place the following code into the "Before Tag"-Tab of the IFrame Object and its working like a charm.
Code: Select all
<style>
@media only screen and (max-width: 800px)
{
#EPGFrame
{
transform-origin: 0 0; transform: scale(2.1);
}
}
</style>