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
Tatiana Batueva
5,929 Pointsproblem with 3 column layout
Hello, I wrote this code and my site doesn't resize to 2 column layou anymoret, where i've maid a mistake?
@media screen and (min-width: 480px) {
/************* TWO COLUMN LAYOUT *************/
#primary { width: 50%; float: left; }
#secondary {
width: 40%;
float: right;
}
}
/************* PAGE PORTFOLIO *************/
gallery li {
width: 28.3333% }
@media screen and (min-width:660px) {
ixrevo
32,051 PointsIt seems that backticks should be on the individual lines, in the other words, your code block should be separated from previous text by blank line, then 3 backticks (```), optionally you could specify a language (```css) to turn on syntax highlighting, then new line, your code, new line and finally closing 3 backticks ```.
Please try it and then I hope I can help you with your problem.
10 Answers
Tatiana Batueva
5,929 PointsHello, Alexander, thanks for the prompt, here it is, my code:
@media screen and (min-width: 480px) {
/*************
TWO COLUMN LAYOUT
*************/
/*** #primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
}
/*************
3 * 5 = 15
100% - 15 % = 85%
85%/3 = 28.333333333
*************/
/*************
PAGE PORTFOLIO
*************/
/*#gallery li {
width: 28.3333%
}
@media screen and (min-width:660px) {
}
Tatiana Batueva
5,929 PointsThis is the right version
@media screen and (min-width: 480px) {
/*************
TWO COLUMN LAYOUT
*************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
}
/*************
PAGE^PORTFOLIO
*************/
#gallery li {
width: 28.3333%
}
@media screen and (min-width:660px) {
}
Tatiana Batueva
5,929 PointsOnce again, sorry for confusing ))
@media screen and (min-width: 480px) {
/*************
TWO COLUMN LAYOUT
*************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
}
/*************
PAGE^PORTFOLIO
*************/
#gallery li {
width: 28.3333%
}
@media screen and (min-width:660px) {
}
ixrevo
32,051 PointsIt's totally Ok. I hate this formatting tool Markdown that used to format messages on this forum. It's not intuitive and very confusing.
Tatiana Batueva
5,929 Pointsso,could you tell me, please, is there an error in my code? i have rewritten it twice already - a letter by letter after Nick but it still doesn't work ( - i have only 3 column layout
ixrevo
32,051 PointsI've found what's wrong.
You've put the expression:
#gallery li {
width: 28.3333%
}
outside of the media query @media screen and (min-width: 480px). Outside means that it was placed after closing curly brace.
If you fix it, your code should looks like:
@media screen and (min-width: 480px) {
/*************
TWO COLUMN LAYOUT
*************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
#gallery li {
width: 28.3333%
}
}
Also don't forget about fix for "jumping captions":
#gallery li:nth-child(4n) {
clear: left;
}
Tatiana Batueva
5,929 Pointsi'm really sorry but it doesn't work here's my site http://web-snjjv4k39d.treehouse-app.com/contact.html and here is my code once again:
@media screen and (min-width: 480px) {
/*****two column layout*/
#primary{
width: 50%;
float: left;
}
#secondary{
width:40%;
float: right;
}
}
@media screen and (min-width: 660px){
/*three column layout*/
#gallery li {
width: 28.3333%
}
#gallery li:n-th-child(4n) {
clear:left;
}
.profile-photo {
float:left;
margin:0 5% 80px 0;
}
/*************
HEADER
*************/
nav {
background:none;
float: right;
font-size:1.125em;
margin-right:6%;
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;
}
}
Tatiana Batueva
5,929 PointsAlexander, I've tested my site on different devices and guess what? It woks perfectly - on a a smartphone it gives two column layout, on my tablet. andd desktop - three column, thank you very much for your help!
ixrevo
32,051 PointsSo, the problem is solved?
I'm glad that was able to assist you.
By the way, I've seen in your profile that you are from Russia. It's true? :)
Tatiana Batueva
5,929 PointsYes, and now when we know that we both are capable of speaking english can we speak Russian, please)))
ixrevo
32,051 Points??, ??????? :)
? ???? ????? ?????????, ??? ???, ??? ????? ??? ???????? ? ??????????.
ixrevo
32,051 PointsNope. It seems, only English is allowed there: I see my words in Russia are displayed as question marks.
Tatiana Batueva
5,929 PointsYes, and now when we know that we both are capable of speaking english can we speak Russian, please)))
Tatiana Batueva
5,929 PointsYes, and now when we know that we both are capable of speaking english can we speak Russian, please)))
ixrevo
32,051 Pointsixrevo
32,051 PointsHi Tatiana!
Could you edit your post and resubmit your css code wrapped with 3 backticks (```) on the line before and after. It helps to retain formatting and makes it readable.
You can find more instructions about how to add code to your forum questions in the video "Tips for asking questions". Link to this video is placed on the right sidebar of this forum page.
Thanx.