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 Build a Three Column Layout

Help Plss... 2colum issue ??

https://w.trhou.se/nstqhlqayd this is my snapshot of my work why does it go to thre colums ??

12 Answers

ravindra barthwal
ravindra barthwal
2,271 Points

http://imgur.com/1Uys1rZ

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

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

primary {

width: 30%;

float: left; }

secondary {

float: right;
margin-right: 10%;

} }

make sure to add media queries for higher screen also as well as the above is the answer but it breaks the about page and i am sure you will fix it within 2 minutes. Cheers!!

ravindra barthwal
ravindra barthwal
2,271 Points

Shpat Aslani can you please tell which page you are talking about. There are three pages namely index.html about.html contact.html

Please tell in which you have problem and please give more details

the contact.html

ravindra barthwal
ravindra barthwal
2,271 Points

So what problem you have in contact.html

http://prntscr.com/7wpm1b look here the text isn't good !

and then look at my footer omg http://prntscr.com/7wplkb... its only when i make my screen wide not mobile ... mobile works perfect!

Man you are the best !!! now i can go on! thank you so much <3

ravindra barthwal
ravindra barthwal
2,271 Points

Thanks dude!!! If any problem just reply or create a new topic

one more thing http://prntscr.com/7wq0fl why doesn't my "profile-photo"= "profilbild" go in the middle now ? i have coded it !

ravindra barthwal
ravindra barthwal
2,271 Points

don't put float: left as it will put the image left to the browser window. Instead use display: block; as it will allow it stand out from other text

yes but i need it that when i make it white it will go to left and when i go mobile i will it to go center and the text below the picture ... excat like he does in the video !

ravindra barthwal
ravindra barthwal
2,271 Points

Shpat Aslani

If i am right, i think you want that when

  1. screen is Bigger(Desktop): the image go to left and the text to right
  2. screen is smaller (Mobile): image go to the center and the text below it.

If so then here is code About.html changed code

***html <section> <div class="profile-container"> <img src="img/shpat01.jpg" alt="Foto av Shpat (Spat) Aslani"> </div> <div class="about-container"> <h3>About</h3> <p>Hej, mitt namn är Shpat Aslani, detta är mitt egna biografiska sida, här delar jag av mig det jag tycker är är viktig som till exempel det jag syslar med som studier, jobb, spela spel, resor och massa annat...!</p> <p>Följ mig på <a href="https://www.facebook.com/ShpatBarca">facebook!</a>.</p> </div> </section>


Main.css changed code

/********************* PAGE: ABOUT **********************/ .profile-container { width: 30%; display: block; float:left; margin: auto; } .profile-container img {

max-width: 150px; border-radius: 100%;

} .about-container { display: block; float: right; width: 65%; }

Responsive.css changed code

/* we are assuming screen of mobile is less than and equal to 500px */ @media screen and (max-width: 500px) { .profile-container { display:block; float:none; } .about-container { width: 100%; } }