nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

iFrame - webpage too big

Alexandra Huang

How can I embed another site using iFrame but scale it so that it isn't as large in the iFrame box? The site is way too zoomed in... I have the page in a left column that can only be as wide as 400 so I'd like for the webpage within it to scale down at least 50%

I'm thinking I can enter something into "CSS Styles" box but I haven't a clue what to enter there.

Accepted answers

All comments

Shannon S

Hi Alexandra,

You could try setting a specific width and height to your iframe, and then apply a scale transformation to it.

For example:

<iframe width="XXX" height="XXX" src="http://www.atlassian.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>

Let me know if this helps.

Kind Regards,
Shannon

Alexandra Huang

Hey Shannon, thanks for helping! I tried entering your script into the "styles" box and it gave me the result as shown in picture '2'

Picture 1 is what I was able to configure just entering 100% width and 640px Height.

Picture 2 is 100% width and 640px and <iframe style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>

Picture 3 is what I would like it to look like instead.

Shannon S

Hi Alexandra,

I used the HTML macro specifically and I tested with this code:

<iframe width="800" height="600" src="http://www.atlassian.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>

Now my page looks like this:

Screen Shot 2017-11-15 at 5.46.11 PM.png

So with this, it shows the entire span of the webpage in miniature form. I think the only difference is I am putting pixels measurement for both height and width, so perhaps you can try that if you like the results I got?

Kind Regards,
Shannon

Alexandra Huang

Hmm... the only HTML macro I have is 'HTML comment' and when I enter your code there, it returns a blank section?

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

iframe