Preventing HTML Object Layout Grid "Break Out"

[ColinM]

Hi Pablo and Planet!

WB Version: 32 Bit - 15.4.3

Demo Stripped Web Page

Demo Stripped Project Zip File


Ok,

A) I have a client that wants Instagram images embedded in their website.
B) I can use the Photo Gallery because the Client posts slide shows and videos that break Photo Gallery.
C) So I found Pixlee's excellent and easy to use plug in.
D) BUT the client doesn't want a whole array of images - just a row of the latest ones.
E) So I embedded a HTML object inside a fixed height floating layout grid with the HTML object set to "Use div to set..."
F) I then copied the Pixlee code snippet into the HTML container.
G) I set the HTML container Full Width value to "True" to use Gutter values across Break Points.
H) When I FTP'ed this with the rest of the page content it worked beautifully in the default (1920 pix) view, with only one row of images showing.
I) I then used the same Layout Grid in a 1580 and 1366 view port.
J) In both cases the HTML object "broke out" of the layout grid and showed a whole load of Instagram images - but not in the 1920 vp.
K) I then stripped everything unrelated out of the project/page, leaving just the LG and contents - see attached.
L) Now the HTML breaks out on all 3 BPs.

How do I stop the HTML container from breaking out of that layout grid please?

[Pablo]

It looks like Pixlee inserts a fixed width inline frame. That is why it breaks out of the Layout Grid.
To prevent this you, will have to make the inline fame flexible.

For example (not tested)

Code: Select all

<style>
#pixlee_container iframe
{
    width: 100% !important;
}
</style>

[ColinM]

It looks like Pixlee inserts a fixed width inline frame. That is why it breaks out of the Layout Grid.
To prevent this you, will have to make the inline fame flexible.

For example (not tested)

Code: Select all

<style>
#pixlee_container iframe
{
    width: 100% !important;
}
</style>

Thanks for the quick response Pablo - where do I paste that - inside the HTML container?

[Pablo]

Usually this goes between the head tags of the Page HTML.

[ColinM]

Usually this goes between the head tags of the Page HTML.

Ah, of course, Thanks Pablo - unfortunately that didn't fix things - it's the same.
Strange I didn't have the problem in the 1920 BP in the original full page project.