IFrame, separate Style in each breakpoint. How?

[Markus]

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

[Pablo]

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:

Code: Select all

@media only screen and (max-width: 800px)
{
   #inlineframe
   {
      transform-origin: 0 0; transform: scale(2.1);
   }
}

[Markus]

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.

Code: Select all

<style>
@media only screen and (max-width: 800px)
{
   #EPGFrame
   {
      transform-origin: 0 0; transform: scale(2.1);
   }
}
</style>