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

Reece Moore
Reece Moore
11,146 Points
Posted by Reece Moore
Reece Moore
11,146 Points

Responsive website

I cant seem to get my website to be responsive on my iphone 6 and desktop. The 3 image layout stays even on mobile devices. Can anyone help me out?

@media screen and (min-width:413px) { /************************************************** TWO COLUMN LAYOUT **************************************************/

primary {

width: 50%;
float: left;

}

secondary {

width: 40%;
float: right;

}

/************************************************** PAGE: PORTFOLIO **************************************************/

#gallery li { width: 28.3333% }

gallery li:nth-child(4n) {

clear: left;

}

}

/************************************************** PAGE: ABOUT **************************************************/

.profile-photo {

float: left; margin: 0 5% 80px 0; }

@media screen and (min-width:413px) {

/************************************************** HEADER **************************************************/

nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }

h1 { font-size: 2.5em; }

h2 { font-size: 0.825em; margin-bottom:20px; }

header { border-bottom: 5px solid #599a68; margin-bottom: 60px; }

}

3 Answers

John Balladares
John Balladares
Courses Plus Student 9,828 Points

Hey Reese,

I just found an article on designing for iPhone. They suggest including the two following meta tags. 

        ```
        <meta name="viewport" content="initial-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        ```

Hope this helps! Here's a link to the article.

Reece Moore
Reece Moore
11,146 Points
Reece Moore
Reece Moore
11,146 Points

That worked! - Thank you so much!!

John Balladares
John Balladares
Courses Plus Student 9,828 Points

Sweet! Glad it worked.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Hi Reece.

Have you included the viewport tag on the HTML page. Without these, phones and devices won't scale the page properly to reflect your changes.

Here's a example

<meta name="viewport" content="initial-scale=1">
Reece Moore
Reece Moore
11,146 Points
Reece Moore
Reece Moore
11,146 Points

Hey Jonathan, I do have the viewport tag included within my html. It works when re-sizing my screen on the laptop but not on my iPhone 6.

Any ideas on a resolve?

Reece

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

That sounds odd to me!

The only other thing I could think of is to check your CSS for errors and valid code and that they're correctly linked.

But with the viewport tag, inside the '''head''' element in your page should work :-)