Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by jne
jne
12,613 Points

Take a look at this

Hi! I'm working on a website for myself that have a fixed navigation bar at the bottom and an iframe above. What's wierd is that the iframe is 100% both ways. Then the content should behave as if it is a regular browser visiting , right? If you take a look here with your mobile(desktop and ipad works good): http://joakim1995.com/nor/ You will see that if you open up icon 4 that webpage looks good. But when you try number 3 that is not rendered good. And then if you try it on your desktop browser and number 3. you will see that if you try to resize your browser that webpage is very responsive.

Have anyone a answer to this?? Nick Pettit, Guil Hernandez, Jason Seifer ?? anyone?

4 Answers

Gabriel Roczanski
PLUS
Gabriel Roczanski
Courses Plus Student 2,136 Points
Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

I really don't understand, everything here is normal. Print the problem please.

lovell
lovell
7,882 Points
lovell
lovell
7,882 Points

Joakim,

Can you clarify your question please so we can have a dig at helping you.

jne
jne
12,613 Points
jne
jne
12,613 Points

The problem is when browsing on a phone. Some of webpages that loads up in the iframe doesn't fit at all, it's not scaled correctly. Look at this: http://imgur.com/c25Gow8 The image is a print screen from iPhone with safari. The webpage is not scaled correctly. And you will ahve to zoom out to see everything, but then my fixed navigation bar at the bottom get's too small.

Ipad and desktop browser: works good Mobile phone: Some webpages is not scaled correctly

Gabriel Roczanski
PLUS
Gabriel Roczanski
Courses Plus Student 2,136 Points
Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

I think the problem is with the external websites, not with your...

jne
jne
12,613 Points

But when I visit those webpages on my phone(not from my webpage) they are scaled and are very responsive...So it got to be something with my code, right?

Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

I think that as you're using iframe they can't recognize the responsive viewport, how is the iframe code? sorry bad english, not my native.

jne
jne
12,613 Points

My iframe code:

<iframe height="100%" name="myiframe" src="img/default/page.html"  id="idIframe" src="" class="iframe" seamless="true" scrolling="none" width="100%" frameborder="0">Your browser doesn't support iframe. Try swithing to an awesome browser like Chrome, Safari or Mozilla Firefox
                </iframe>

css:

iframe{
position: absolute;
height: 100%;
width: 100%;

}

I also have a iframe wrapper with width and height 100%

Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

Try that:

<div class="frame">
   <iframe name="myiframe" src="img/default/page.html"  id="idIframe" src="" class="iframe" seamless="true" scrolling="none" allowfullscreen>Your browser doesn't support iframe. Try swithing to an awesome browser like Chrome, Safari or Mozilla Firefox
                </iframe>
</div>

.frame { position: relative; height: 0; overflow: hidden; }
.frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
jne
jne
12,613 Points

I made the changes to the site. You can check it out. Doesn't look like it worked. :( Please come with more suggestions

Edit: .frame height:0; is that meant to be height:100%?