Iframe Resizing

#1

Hi There

We are embedding an external catalogue into a new site using an iframe.

http://tinyurl.com/y67ndhjs

However, it doesn’t render well on the mobile.

We were hoping to zoom out on the mobile widths, so that the users sees the full options of categories.

I’ve been playing around with the scale css command and widths but with no success, would it be possible to clarify if that we want to achieve is possible?

Many Thanks In Advance For Any Responses

1 Like
#2

Welcome to the forums daniel88
The correct width and height settings would depend on how you want it to look.
But the real question is: why are you embedding in an iframe in the first place?

#3

Assuming I am looking at the right thing: :slight_smile:

You should construct the iframe page so that it displays properly on mobile to start with. No other method will produce satisfactory results.

Indeed even when you display on desktop the display is broken because you have inserted the iframe into the right column and there is not enough room for it there. All the text on the products overlap and the side menu is squished.

At about 700px and under the iframe alone is starting to break up and should have had media queries in place to re-arrange the display to something more suitable for smaller screens.

A quick fix would be to make the iframe 100% width of your layout at 700px width or less (i.e. make it span all columns). Then wrap a div around the iframe that is 100% width and set overflow:auto so that the user can scroll to the right to see the whole iframe at a reasonable width.

Another quick fix would be to use the transform property and scale the iframe by 50% smaller ( or whatever is necessary). That should still allow the user to zoom the iframe to read it.

I believe you could get the same effect by setting a viewport meta tag in the iframe itself and setting the viewport meta tag width to 700px but I have not tested that and I’m guessing there will be browsers differences,

The best answer is to make the iframe properly responsive at source.:slight_smile:

1 Like
split this topic #4

A post was split to a new topic: Iframe not responsive

#5

Thanks for the reply guys

The catalogue is embedded from a supplier, so we don’t control the formatting of the source content itself. Hopefully that will be responsive in the next couple of months.

I fully understand the comment that the solution won’t be ideal without the source content working well.

I’ve tried the zoom and iframe options but neither worked as expected, I was hoping there might be another way but seemingly not

Thanks for your responses guys much appreciated

1 Like
#6

here is an example of using transform and this is about the only thing you can do if you don’t have access to the iframe.

@media screen and (max-width:700px){

    .entry-content{margin:0 -1.5em!important;;width:auto;max-width:none;overflow:hidden}
    .entry-content iframe{
       width:200%;
       margin:0;
       max-width:none;
       transform:scale(.5);
       transform-origin:left top;
    }
    .entry-content code{display:block;max-width:100%;}
}

Applying that code would give this display:

You could make the display smaller by using .25 scale and 400% width. Hopefully the mobile will allow the user to zoom the page to see the content better.

Of course you would probably need to add classes for that page only as I guess some of the styles above are global.

It would also help if you found an iframe script that resizes the ifame to the height of its content rather than setting a magic number height of 1800px (which you would of course have to adjust via media queries as the catalogue gets smaller).

Another (bad) option for the catalogue page would be to remove the viewport meta tag from the page altogether and then the whole layout is scaled smaller. :slight_smile:

1 Like
#7

Hi Paul

Thanks for this, that has worked perfectly. May need to make a few tweaks but that has achieved exactly what I was hoping for.

Much appreciated

1 Like