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

CSS How to Make a Website Responsive Web Design and Testing Website Testing

Erik Christiansen
Erik Christiansen
2,815 Points
Posted by Erik Christiansen
Erik Christiansen
2,815 Points

Responsive on desktop but not mobile

I have created my site, but there are still a couple of errors I can't fix. First, I have a white above the navigation/logo in the "about" page and I don't know how to get rid of it. The second issue, is that my website is responsive on the desktop, but it doesn't seem to change on my iPhone or iPad. Did I miss a line of code?

The website I've created is jenniferevaniew.com

I have a domain from Hover.com, and it's forwarding to the site which is hosted on my Github account.

5 Answers

Jeremy Menicucci
Jeremy Menicucci
19,227 Points

The website that you're embedding into your site from http://eriksation.github.io/jenniferevaniew/ works fine on a mobile device. Pulling up http://jenniferevaniew.com/ shows the responsive styles aren't being applied.

I think your breakdown is in using an iframe that has no css styles to it embedding the content from another site. I would say either don't use an iframe or style the iframe accordingly. This link may be beneficial to you if you absolutely need to iframe this:

http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/

Let me know if that fixes the issue.

El Nino H. Maulana
El Nino H. Maulana
4,483 Points
El Nino H. Maulana
El Nino H. Maulana
4,483 Points

The first problem just because your h1 inside your #logo, (line 45 in your main.css file) have a 15px margin on top and bottom, instead of using margin, you can use a padding. And, finally, set the margin of your h1 to 0.

For the second problem, I think, you aren't doing mobile first. It's best practice to start designing your website interface on mobile, rather than on desktop.

I hope this will help you. Peace and love.

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

Yep, you are right, that's the solution, it's because of the margin-top of the h1... Forget what I stated about the fact you could set the height of the header, It's far from being the right solution in this case.

Erik Christiansen
Erik Christiansen
2,815 Points
Erik Christiansen
Erik Christiansen
2,815 Points

Ok, so I changed the Github account name to something not so unprofessional (my work account name) and I turned off stealth forwarding for the domain jenniferevaniew.com. I also added <meta name="viewport" content="width=device-width, initial-scale=1" /> in the head of each page. I think that worked! Thanks a lot for your help :)

Jeremy Menicucci
Jeremy Menicucci
19,227 Points

Looks good on my phone, well done Erik!

Jan Van Raemdonck
Jan Van Raemdonck
22,961 Points
Jan Van Raemdonck
Jan Van Raemdonck
22,961 Points

don't forget to add the viewport tag in the head section of your page to have it display properly on mobile devices:

<meta name="viewport" content="width=device-width, initial-scale=1" />
Erik Christiansen
Erik Christiansen
2,815 Points
Erik Christiansen
Erik Christiansen
2,815 Points

I see what you mean. But, I'm simply forwarding jenniferevaniew.com to the github address. I don't understand how that's an iFrame issue. I didn't think I was embedding anything. I purchased the domain name separately, and just told it to forward. I'm a bit new at this, I'm open to the possibility that iFrames are something I don't get yet.

Jeremy Menicucci
Jeremy Menicucci
19,227 Points

Well I did make the mistake of saying you're using an iframe, when it's actually a frameset. However, that's still not forwarding the domain. Forwarding the domain would be a good solution. However, after viewing the page source of http://jenniferevaniew.com/ that's not what's going on. The following code at http://jenniferevaniew.com/ shows where you're embedding the site http://eriksation.github.io/jenniferevaniew/, 

<frameset framespacing="0" rows="100%,*" cols="100%" frameborder="no" border="0">
  <frame name="DDIRECTXYZZY2" scrolling="auto" src="http://eriksation.github.io/jenniferevaniew" noresize>
  <frame name="DDIRECTXYZZY" scrolling="no" noresize>
  <noframes>
    <h1><a href="http://eriksation.github.io/jenniferevaniew">http://jenniferevaniew.com/</a></h1>
    <p>Please <a href="http://eriksation.github.io/jenniferevaniew">click here</a> to view the non-framed versi
on.</p>
  </noframes>
</frameset>

So basically you're splitting the screen into different parts displaying the github hosting page on the jenniferevaniew.com page.

But I've noticed while writing this comment that you are now forwarding the address to the github page (which is 404ing now for me.)

Edit: It's no longer 404ing.

Jeremy Menicucci
Jeremy Menicucci
19,227 Points

Looks like the only thing that's missing now is the viewport meta tag in the head. Go ahead and add that in and we'll see if that solves it.

<meta name="viewport" content="width=device-width, initial-scale=1">