It's easier if we can see your coding, to locate the issue.

Hi Dilshan,

Post your responsive.css code.

Was it correctly displaying as 2 columns earlier in the course before you made it 3 columns for wider screens?

Check to make sure that the css to make it 3 columns is actually inside the media query. If you've accidentally put it outside of any media queries then it will override what you have in main.css and that could explain why it's always 3 columns now.

hi.. thankx for reply... Q: Was it correctly displaying as 2 columns earlier in the course before you made it 3 columns for wider screens? A: Yes..

Here is my code.

responsive.css

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

/******************************* TWO COLUMN LAYOUT ********************************/ #primary { width: 50%; float: left; }

#secondary { width: 40%; float: right; }
}

#gallery li { width: 28.3333% }

#gallery li:nth-child(4n) {
clear: left;

}

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

}

main.css

/*************** GENERAL ***************/

body { font-family: 'Sancreek';

}

a { text-decoration: none; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

img { max-width: 100%; /this max width of 100% tells the images to fill the width of their parent container./ }

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

header { float: left; margin: 0 0 30px 0; /* TOP >> RIGHT>> Bottom >> Left (Remember clock wise)*/

/*Setting our margins keeps the header separated from other content at least on the bottom. But removes the problematic margins that we had on the top, previously.*/

padding: 5px 0 0 0; /Then, we add some padding on the top to separate the text without actually removing the margin from the top of the page./

width: 100%;

}

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Sancreek', cursive; margin: 15px 0; font-size: 2.75em; font-weight: normal; line-height: 0.8em;

}

h2 { font-size: 0.75em;

margin: -5px 0 0; /* The first value here, sets the top. The second, value, sets the left and right. And the third value sets the bottom. This negative value that we're applying to the top will actually pull the element closer to the other elements around it, rather than pushing it away. This is a common technique when you want elements to be tighter together, especially when you're styling typography.*/

font-weight: normal; }

h3 { margin: 0 0 1em 0;

} /*************** NAVIGATION ***************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; /there were no bullet points that we could see. We still wanna make sure that we are removing those anyway./ margin: 0 10px; padding: 0; }

nav li { display: inline-block; /* Every element has a display property by default,and it's set to either block or inline. Block level element will take up space in the page, and appear to push other things out of the way. These are things like sections, divs, and many other elements. Inline elements are mostly just text. For example, when we add an anchor element inside of a paragraph, it doesn't push all of the words out of the way or push anything to the next line, it just appears in the same line, or inline, As the rest of the text, hence the term inline. We're actually going to use another property, though, called inline block. This will allow us to have these items side by side, just like inline elements, but they'll retain other block level features, such as having a width and height. So, lets say nav, list items, display in line, block.*/ }

nav a { font-weight: bold; padding: 15px 10px; /we've added some padding on all sides of our links. This will make the click targets on them easier to hit with a mouse of a touch screen device./

} /*************** FOOTER ***************/

footer{ font-size: 0.75em; text-align: center; clear: both; /* We'll set the value of clear to both because we want it to be cleared on both the left and the right sides. it says, text align center, we'll go ahead and say, clear both,*/

padding-top: 50px; color: #ccc;

}

.social-icon { width:20px; height: 20px; margin: 0 5px; }

/We want them to be smaller and less prominent. These icons are about twice the size that they need to be. That's because we want these images to look sharp on high resolution displays that have double pixel density.By creating the images at twice the size and then resizing them downward using CSS, the pixels will still be there for high res displays. These types of high res displays aren't everywhere yet, but they're starting to become more common in mobile devices, as well as desktop devices. In order to do this, we actually need to switch back to our HTML, so that we can properly select, each one of these. On our first link, just after the alt attribute, I'm going to add a class attribute, called social-icon./

/*************** COLOR ***************/ a { color: #6ab47b; }

header { background: #6ab47b; border-color: #599a68; }

h1, h2 { color: #fff; }

nav { background: #599a68; }

/* a:visited and a:hover are Pseudo-Class, refer the note*/ nav a, nav a:visited { color: #fff; }

/* a.selected is a class mention on HTML page*/ nav a.selected, nav a:hover{ color: #32673f; }

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

gallery {

margin: 0; padding: 0; list-style: none; /This will remove any kind of bullet points from a list if we set it to none./ }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7;

}

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; /* color: #bdc3c7; */ }

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

.profile-photo { display: block; /By default, images are display in line, but we don't want this image to be displayed in line with the rest of the text./

max-height: 150px; margin: 0 auto 30px; /auto = left and right/ 0= top / 30px= bottom/ border-radius: 100%;

}

/* Correction for Firefox

There's a bug in the CSS for this video that causes the profile picture to display incorrectly in Firefox. In order to correct the issue, the clear property with the value both needs to be applied to the .profile-photo class. Here's what the corrected code looks like:

.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; } */

/*************** PAGE: CONTACT ***************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; /Remove alla the bullet points in contact detail section/ }

.contact-info li.phone a { /we type "li.phone" togather because There's no element here with the class phone It's the list item that has the class phone */ /<li class="phone"><a href="tel:555-5555">555-555</a></li>*/ background-image: url('../img/phone.png'); /*from The two dots allow us to go up one directory, so in this case, main dot CSS is inside of the CSS folder. So we can't just jump folders and go straight to the images folder where our phone image is stored. We have to step out of the directory and go up one level. So if we're in main, we type the two dots, that will bring us up to the root folder here, and then we can go back down into image and finally phone. */ }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; /Background images in CSS will always repeat by default/ background-size: 20px 20px; padding: 0 0 0 30px; /in here the padding will push the icon to left/ margin: 0 0 10px; /margin will create virtical space beitween icons/

}

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); }

/*

nav01 li {

width: 25%; margin: 1%; background-color: #bdc3c7; color: #bdc3c7; } */

Please Help me...

Thank you...

It's kind of odd that the coding posted like that, so it's kind of hard to read. At a glance could you try moving the } that you have after the line:

secondary { width: 40%; float: right; }

} <--------this one

And putting it above this line:

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

Let me know if that worked.