Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

DOMINIC RICKARD
DOMINIC RICKARD
2,036 Points

The two column layout is working on the contact page but it will not switch in line when I reduce the screen size?

What should the css look like?

Daniel Gauthier
Daniel Gauthier
14,999 Points

Hey Dominic,

It's always easiest to help when we're able to get a look at your code. You could post the link to your workspace, or you could use the method outlined in the "Markdown Cheatsheet" located above the "Post Comment" button when typing out an answer or comment.

Once we're able to look over your code we'd be able to help you out more.

4 Answers

Juan Naranjo
Juan Naranjo
10,188 Points

Hey Dominic.

As Daniel says is easiest when we can look at the code. But based on the question I will try to give you some ideas to solve the problem.

when you reduce the screen size the two columns have align problems? if this is the situation this can be solve using this simple css code:

.col {
vertical-align: top;
}

The class "col" has to be in the two columns <div> This code align the columns to the top of the parent container

When you reduce the screen size the two columns do not switch into a single column? if this is the situation you need to check the media queries structure and conditions, make sure looks something like this:

@media (min-width: 600px) {

.col {
float: left;
width: 50%;
}

}

The class "col" has to be in the two columns <div>

I hope this can help you, if you have any doubt fell free to ask.

DOMINIC RICKARD
DOMINIC RICKARD
2,036 Points

I think you have answered the question already!

My code was not contained in the media query and I did not use the col class- because this was not in the tutorial.

Thank you very much

DOMINIC RICKARD
DOMINIC RICKARD
2,036 Points

I have one issue where my h1 on the header is not aligning left with the h2- please let me know if you can see an issue and if there's a good way to format:

https://w.trhou.se/ducj79b1i0

Daniel Gauthier
Daniel Gauthier
14,999 Points

Hey Dominic,

I took a look at your site and found two issues that are causing the alignment problems.

In order to fix the h1 alignment problem, just remove the text-align: center from the h1 rule, then update your margin rule to margin: 20px 0;. This will push the left side of your h1 flush with the h2.

This is what your h1 rule in your main.css would look like after the changes are applied:

h1 {
  font-family: 'Archivo Narrow', sans-serif;
  margin: 20px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 1.2em;
}

A second issue that they don't have you correct in the course is how the h2 seems to be a little closer to the left side of the screen than the h1 in the large screen layout, which is simply due to the h1 having a larger font size than the h2. If you want to fix this, just add 1 or 2 pixels to the left padding of the h2 element in your responsive.css file. If you did this, your h2 rule in your responsive.css would look like this:

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

This fix won't affect your small screen layout since it is applied to the media query. The small screen layout doesn't require any changes past what has already been done here.

The site looks great so far, good luck with the rest of the development!