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

David Carson
David Carson
939 Points
Posted by David Carson
David Carson
939 Points

Code not working on mobile or tablet devices in right scale

When i check my website on my mobile device it stays the same scale as the desktop, anyone able to help me? Im also having trouble with the gallery images on the portfolio page not dropping down properly when scaled down to mobile size. This is the responsive code:

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

/*************************** TWO COLUMN LAYOUT ***************************/

primary {

width: 50%; float: left; }

secondary {

width: 45%; float: right; }

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

gallery li {

width: 28.3333%; }

gallery li:nth-child(4n) {

clear: left; }

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

.profile-picture { float: left; margin: 0 5% 80px 0; }

secondary2 {

margin: 11px; }

}

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

/*************************** 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; }

h1 { font-size: 2.5em; }

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

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

Zoltán Holik
Zoltán Holik
3,401 Points
Zoltán Holik
Zoltán Holik
3,401 Points

You need to use media querries for different views in your CSS files. Please share the web address and I will be able to help more

Zoltán Holik
Zoltán Holik
3,401 Points
Zoltán Holik
Zoltán Holik
3,401 Points

Here is a default template for different screen size. And you need to use a dot before the Primary, secondary, gallery if those are classes, or # if ids

/* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width:960px){
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width:1440px){
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width:2000px){
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width:480px){
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width:768px){
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */

2 Answers

Zoltán Holik
Zoltán Holik
3,401 Points
Zoltán Holik
Zoltán Holik
3,401 Points

And another error is in your head section: Not viewpoint but viewport

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