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 trialOtto Mejia
744 PointsMy index.html page stays in a Three column layout when I resize it.
I'm doing the exercises How to Build a Website, and I'm up to the part where we build a Three column layout. In the portfolio page of my website. When I clear left in my gallery with the :nth-child, it fixes a minor problem with the layout and the text within the child. But that's it. When I resize it to a mobile size, it makes the gallery smaller like it should, but it stays in a three column grid. All my queries are in place. How do I make it into a one column layout, or two for tablet layouts?
8 Answers
Jeff Jacobson-Swartfager
15,419 PointsIf you are taking a mobile first approach, you can use your media queries to target sizes for tablets and screens.
Use your non-media queried styles to create a one column layout, then override some of those styles with a media query for tablets to create a two column layout, and then again for screens to create a three column layout.
Your approach to creating multiple columns is up to you, but some of the lessons later on in this course should give you some ideas.
Otto Mejia
744 PointsYes, I fixed their is more to the second media queries. It probably didn't get copied when I sent it to you. It looks like this.
``` @media screen and (min-width: 660px) {
}
nav { background: none; float: right; font-size: 1.25em; margin-right: 5%; text-align: right; width: 45%;
}
logo {
float: left; margin-left; 5%; text-align: left; width: 45; }
h1 { font-size: 0.825em; margin-bottom: 20px; }
header { border-bottom: 5px solid #599a68 margin-bottom: 60px; }
}
I got rid of that coma in the main.css and that stray bracket in the responsive.css.
Otto Mejia
744 PointsI also replaced the 480px 768px for the first media queries, nothing changed when I refreshed my website. All the small changes I did didn't affect the website at all.
Jeff Jacobson-Swartfager
15,419 PointsCould you try pasting the whole thing in using the Markdown formatting? It is really hard to read as it is.
If you're having trouble with markdown, please use codepen and post a link.
Otto Mejia
744 PointsWith codepen it only lets me put the html and css on two windows. I can't seem to find how to place my other html their to check it. For markdown, how can I make my code readable? I want to place it inside a black background with colored readable code like you have. The three ticks don't work too well for me.
I have fixed most of my website but only a few minor things like when I resize my browser to view the website in a mobile layout it shrinks my header. I can't figure out a way to fix this.
By the way thank you for your support. I have fixed many problems because of your help.
Jeff Jacobson-Swartfager
15,419 PointsIf your multiple column layout issue has been solved, please mark this question as solved. You should open up a new question for any additional issues you have.
We really only need to see one html file to diagnose what you're doing. So, just put the problem html file up there. If all of your html files have the same problem, just choose one. Codepen is the best choice for getting help in a problem like this.
To display html in markdown do this:
```html
<!-- put the contents of one html here, like this: -->
<!DOCTYPE html>
<html>
<head> <!-- use more spaces to indent -->
<title>My Page Title</title>
</head>
<body>
</body>
</html>
```
To display css in markdown, do this:
```css
/* put the contents of one css file here, like this: */
p { color: blue; }
a {
color: white; /* again, use more spaces to indent */
background-color: red;
}
```
Otto Mejia
744 PointsI actually still have column layout problems. The text in my gallery in my index.html doesn't shrink with the rest of the layout. It stays one size making the layout pretty awkward. The only thing I solved was making the columns correspond. Not the content so much. And my heading logo acts real abnormal when I resize the website to a mobile size screen. It actually shrinks dramatically.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Otto Mejia | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,
700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Otto Mejia</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/number-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
</li>
<li>
<a href="img/number-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="img/number-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="img/number-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</li>
<li>
<a href="img/number-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repitition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="https://twitter.com/Otto__me" target="_blank">
<img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
<a href="http://ottosportfolio.squarespace.com" target="_blank">
<img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
<p>© 2015 Otto Mejia</p>
</footer>
</div>
</body>
</html>
Here's my codepen version. I only put my html and my css. not the others. Hope I'm doing this right.
Jeff Jacobson-Swartfager
15,419 PointsIt looks like you've declared the font-size
of your #gallery li a p
elements in your base styles too big. Two quick fixes come to mind:
Fix No. 1 (recommended)
In your base styles, change the font-size
to something more reasonable for a mobile device. Then, in your media queries add additional styles to optimize the experience on larger devices.
You could change your initial style to this:
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 1em; /* Use to be 1.75em */
color: #949494;
}
And add to an existing media query or create a new one later on with this:
@media (min-width: 768px) { /* only on devices 768px wide or bigger */
#gallery li a p { /* select your paragraph elements in your gallery at the same specificity they were selected earlier */
font-size: 1.75em; /* size up to your original settings */
}
}
This approach is recommended because it follows the mobile first approach.
Fix No.2 (not recommended)
Use a media query to scale the font-size
smaller on small devices.
@media (max-width: 768px) { /* only on devices smaller than 768px wide */
#gallery li a p { /* select your paragraph elements in your gallery at the same specificity they were selected earlier */
font-size: 1em; /* size 'em down to 1em */
}
}
Otto Mejia
744 PointsOk, thank you so much. I'll try these out to see how it comes out. I have most of my website done thanks to you. Sorry for constantly asking questions, but I'm new to this. I want to get a job as a web developer. How likely is one to find a job in this field?
Jeff Jacobson-Swartfager
15,419 PointsI'm glad I could help!
If you are looking to get a job as a web developer, you'll benefit from a strong understanding of front end development (e.g., JavaScript, HTML, CSS) and a back end programming language (like Ruby, Python, PHP, GO, and the .NET framework). Most importantly, you'll need to get involved in the development community and develop a portfolio of projects.
Good luck!
Otto Mejia
744 PointsThanks for your help again. How likely is one to find a decent job through treehouse? I know treehouse takes 6 months to a year to learn, but how well does it really help you find a job. Did you find your current job through the website?
Jeff Jacobson-Swartfager
15,419 PointsThis would be a perfect candidate for a new question on the forum!
I'm a freelance designer and frontend developer. I haven't gotten any leads through Treehouse, but more opportunities are always good.
Otto Mejia
744 Pointsdoing either is a viable option. But did you start your career through a school or other program?
Otto Mejia
744 PointsOtto Mejia
744 PointsI already followed those instructions through the course. I made all the styles in the main.css file, then used media queries to enhance the tablet and desktop layouts. How can I show you my workspace?
Jeff Jacobson-Swartfager
15,419 PointsJeff Jacobson-Swartfager
15,419 PointsYou can use codepen to show your code.
Otto Mejia
744 PointsOtto Mejia
744 Points```html/css media.css /******************************************** GENERAL ********************************************/
body { font-family: 'Open Sans', sans-serif; }
wrapper{
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img{ max-width: 100%; }
h3 { margin: 0 0 1em 0; }
/******************************************** HEADING ********************************************/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0;
width: 100%; }
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Changa one', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 { font-family: 'Open Sans', sans-serif; font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/******************************************** NAVIGATION ********************************************/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
nav ul { list-style: none; margin: 0 10px; padding: 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
/******************************************** FOOTER ********************************************/
footer { font-size: 0.75; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0, 5px; }
/******************************************** PAGE: PORTFOLIO ********************************************/
gallery {
margin: 0; padding: 0; list-style: 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: #949494; }
/******************************************** PAGE: ABOUT ********************************************/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 50px; }
/******************************************** PAGE: CONTACT ********************************************/
.contact-info { list-style: none; margin: 0; padding: 0; font-size: 0.9em; }
.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }
.contact-info li.phone a { background-image: url('../img/phone.png'); }
.contact-info li.mail a { background-image: url('../img/mail.png'); }
.contact-info li.twitter a { background-image: url('../img/twitter.png'); }
/******************************************** COLORS ********************************************/
/* site body */ body { background-color: #fff; color: #999; }
/* links ************************************/ header { background: #6ab47b; border-color: #599a68; }
/* nav background on mobile *****************/ nav { background: #599a68; }
/* logo text ********************************/ h1, h2 { color: #fff; }
a { color: #6ab47b; }
nav a { color: #fff; } /* nav link ********************************/ nav a, nav a:visited { color: #fff; } / selected nav link ************************/ nav a.selected, nav a:hover { color: #32673f; }
/********** responsive.css****************/
@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%; }
gallery li:nth-child(4n) {
clear: left; }
/******************************************** PAGE: ABOUT ********************************************/
.profile-photo { float: left; margin: 0 5% 80px 0; }
}
@media screen and (min-width: 660px) {
}
Jeff Jacobson-Swartfager
15,419 PointsJeff Jacobson-Swartfager
15,419 PointsI've tried to take what you posted and convert it to markdown formatting. Could you confirm that I didn't miss anything?
On the assumption that I got it right, I've added a few inline comments about some weirdnesses that might be causing you some issues.
You make use of the
#primary
and#secondary
IDs in your first media query, but you don't do anything with them in the initial styles. If you aren't seeing a single column on phones, you might consider setting them towidth: 100%;
.