IFrame, separate Style in each breakpoint. How?

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
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
Post Reply
User avatar
Markus
 
 
Posts: 94
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

IFrame, separate Style in each breakpoint. How?

Post by Markus » Fri Jul 05, 2019 5:21 pm

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

User avatar
Pablo
 
Posts: 17643
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: IFrame, separate Style in each breakpoint. How?

Post by Pablo » Fri Jul 05, 2019 5:42 pm

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);
   }
}

User avatar
Markus
 
 
Posts: 94
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: IFrame, separate Style in each breakpoint. How?

Post by Markus » Fri Jul 05, 2019 8:44 pm

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>

Post Reply